header{display:flex;position:fixed;top:0;left:0;width:100%;z-index:100;align-items:center;justify-content:space-between;padding:30px 4vw;transition:all 1s var(--ulu-curve)}
header:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--cream);transform:translateY(-101%);transition:all .8s var(--ulu-curve);z-index:-1}
header.Filled:before{transform:translateY(0)}
nav{display:flex;align-items:center}
.main-menu{display:flex;justify-content:center}
.main-menu li{margin:.4rem 2rem 0;display:flex;align-items:center}
.main-menu li a{text-transform:uppercase;font-weight:600;font-size:1.2rem;color:var(--menu-text-color)}
.menu_icon{display:block;margin-left:1.5rem;width:1.6rem;height:1.6rem;position:relative}
.main-menu_right{display:flex;margin-left:3rem;align-items:center}
.Icon{width:100%;height:100%;object-fit:contain;color:var(--menu-text-color);transition:all .8s var(--ulu-curve);display:block}
.menu_icon:hover .Icon{color:var(--gold);transform:scale(1.08)}

/* logo */
.site_logo{width:220px;height:48px;position:relative;overflow:hidden;display:block}
.Logo_Row{display:flex;align-items:center;gap:.6rem;position:absolute;top:50%;left:0;transition:all .5s var(--ulu-curve);white-space:nowrap}
.Logo_Icon{width:30px;height:46px;flex:none}
.Logo_Word{font-family:var(--title-font);font-weight:800;font-size:2rem;text-transform:uppercase;letter-spacing:.01em;line-height:1}
.Logo_Dark{transform:translateY(-175%);color:var(--dark)}
.Logo_Light{transform:translateY(75%);color:var(--cream)}
.Logo_Light.Shown,.Logo_Dark.Shown{transform:translateY(-50%)}

.menu_icon.burger{display:none}
@media screen and (max-width:768px){
	header{padding:22px 4vw}
	.menu_icon.burger{display:block}
	.main-menu{display:none}
	.site_logo{width:170px;height:40px}
	.Logo_Word{font-size:1.6rem}
	.Logo_Icon{width:24px;height:38px}
	.main-menu_right{margin-left:0}
}

/* mobil menü çekmecesi */
.Menu_Drawer{position:fixed;right:0;top:0;width:100%;height:100%;z-index:20000;padding:30px 4vw;gap:2rem;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;overflow:hidden}
.Menu_Drawer_Content{display:flex;flex-direction:column;gap:1rem;align-items:flex-start;justify-content:center}
.Menu_Drawer>div{transition:all .4s var(--ulu-curve);opacity:0}
.Menu_Drawer.open>div{transition:all .4s var(--ulu-curve) .6s;opacity:1}
.Menu_Drawer:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);transform-origin:bottom right;min-width:120%;min-height:120%;aspect-ratio:1;border-radius:10000px;background-color:var(--dark);z-index:-1;transition:all .8s var(--ulu-curve) .4s}
.Menu_Drawer.open:before{transition:all .8s var(--ulu-curve);transform:translate(-50%,-50%) scale(1)}
.Menu_Drawer .Drawer_Top{display:flex;justify-content:space-between;align-items:center;border:none;margin-bottom:0}
.Menu_Drawer .Drawer_Top .Logo{width:auto;height:auto;overflow:visible;display:flex;align-items:center;gap:.6rem;color:var(--cream)}
.Menu_Drawer.open{pointer-events:all}
.Menu_Drawer_Links{text-align:left;display:flex;flex-direction:column;gap:2rem;width:100%}
.Menu_Drawer_Link{font-family:var(--title-font);font-size:4.5vh;margin:0;display:block;text-align:left;text-transform:uppercase;font-weight:600}
.Menu_Drawer a{color:#fff}
.Menu_Drawer .Drawer_Close{background:none;border:none;width:2rem;height:2rem;padding:0;cursor:pointer}
.Menu_Drawer .Drawer_Close .Icon{color:#fff}
.Menu_Drawer_Socials{display:flex;justify-content:flex-start;gap:1rem}
.Menu_Drawer_Socials a{width:2.5rem;height:2.5rem;display:block}
.Menu_Drawer_Socials .Icon{color:var(--cream)}
.Menu_Drawer .Drawer_Bottom{height:180px}
.Menu_Drawer .Drawer_Bottom .Drawer_Changing_Images{overflow:hidden;border-radius:1.5rem;display:flex;flex-wrap:nowrap;width:100%;height:100%}
.Menu_Drawer .Drawer_Bottom .Drawer_Changing_Images .Fluid{min-width:100%;width:100%;height:100%;animation:changingImages 15s infinite var(--ulu-curve);background:#fff}
@keyframes changingImages{0%{transform:translate(0)}33%{transform:translate(0)}36%{transform:translate(-100%)}66%{transform:translate(-100%)}69%{transform:translate(-200%)}97%{transform:translate(-200%)}to{transform:translate(0)}}