@media (min-width: 993px) {
.topmenu {display:block!important;}
.topmenu > ul {display:flex; justify-content:space-between; gap:0.5%;}
.topmenu > ul > li {flex:1;}
.topmenu > ul > li {height:50px; position: relative;}
.topmenu > ul > li > a {
	display:block; padding:19px 0 0 0; height:100%; text-align:center; 
	text-decoration:none; font-size:14px; font-weight:500; color:#fff; 
}
.topmenu > ul > li > a:hover {color:#fff;}
.topmenu > ul > li:before {position:absolute; top:4px; right:0; left:0; height:5px; content:''; background:#fff; transition:all 0.5s;}
.topmenu > ul > li:hover > a {background:rgba(255,255,255,0.3); transition:all 0.5s;}

.topmenu > ul > li > ul > li {background:var(--ok2) no-repeat 8px 9px; background-size:11px auto; padding-left:20px;}
.topmenu > ul > li > ul > li > a {display:block; text-decoration:none; font-size:14px; line-height:120%; text-transform:uppercase; font-weight: normal; padding:6px 5px 6px 5px; color:#fff; margin:2px 0 2px 0;}
.topmenu > ul > li > ul > li > a:hover,   .topmenu > ul > li > ul > li.active > a {color:#fff; text-decoration:underline;}

.topmenu > ul > li > ul {/* POPUP MENU */
	min-height:150px; min-width:400px;
	background:rgba(0,0,0,0.8); backdrop-filter: blur(5px);
	box-shadow: 7px 10px 13px -8px rgba(31,29,31,0.75);
}

.topmenu > ul > li > ul {display:none; position:absolute; padding:1em 1em 1em 0;}
.topmenu > ul > li:hover > ul {display:block;}

.topmenu > ul > li:nth-child(5) > ul {right:0px; width:auto;}
.topmenu > ul > li:nth-child(6) > ul {right:0px; width:auto;}

#menubars {display:none;}

.topmenu > ul > li:nth-child(1) {background:var(--color1);}
.topmenu > ul > li:nth-child(2) {background:var(--color2);}
.topmenu > ul > li:nth-child(3) {background:var(--color3);}
.topmenu > ul > li:nth-child(4) {background:var(--color4);}
.topmenu > ul > li:nth-child(5) {background:var(--color5);}
.topmenu > ul > li:nth-child(6) {background:var(--color6);}

.topmenu > ul > li:hover:before {background:#ccc;} /* color-mix desteklemeyenler için */
.topmenu > ul > li:nth-child(1):hover:before {background:color-mix(in srgb, var(--color1), black 30%);}
.topmenu > ul > li:nth-child(2):hover:before {background:color-mix(in srgb, var(--color2), black 30%);}
.topmenu > ul > li:nth-child(3):hover:before {background:color-mix(in srgb, var(--color3), black 30%);}
.topmenu > ul > li:nth-child(4):hover:before {background:color-mix(in srgb, var(--color4), black 30%);}
.topmenu > ul > li:nth-child(5):hover:before {background:color-mix(in srgb, var(--color5), black 30%);}
.topmenu > ul > li:nth-child(6):hover:before {background:color-mix(in srgb, var(--color6), black 30%);}

.footmenu {
	background:#004F6E; border-top:1px solid #000; border-bottom:1px solid #000; padding:20px 20px 20px 20px!important;
	column-count:4; column-gap:2rem; column-rule:1px solid #fff; column-fill:balance;
}
.footmenu > ul > li {break-inside: avoid; margin:0px 0 20px 0;}
.footmenu > ul > li > a {margin:10px 0 10px 0; font-size:12px; color:#fff; font-weight: bold; display:block; text-transform:uppercase;}
.footmenu > ul > li > ul > li {padding-left:0px;}
.footmenu > ul > li > ul > li > a {display:block; margin:0 0 5px 0; padding:1px 0 1px 0; font-size:12px; line-height:120%; color:#fff; font-weight: normal; text-transform:uppercase;}
.footmenu a:hover, .footmenu a.active {text-decoration:underline; color:#fff;}
.footmenu > ul > li > ul > li.active > a {text-decoration:underline;}
}

@media (max-width: 1024px) {
	.footmenu {column-count:3;}
}

@media (max-width: 992px) {
	.footmenu {display:none;}
	#menubars {width:25px; height:auto; cursor:pointer; position:absolute; right:9px; top:8px;}
	.topmenu {display:none;}
	.topmenu > ul {background:#000000dd; position:absolute; top:65px; width:100%; padding:1em; min-height:calc(100vh - 70px);}
	.topmenu > ul > li {padding:0.5em 0;}
	.topmenu > ul > li > a {font-size:14px; color:#fff; font-weight: 500; text-decoration:none;}
	.topmenu > ul > li > ul {display:block; margin:0.5em 0;}
	.topmenu > ul > li > ul > li {padding:1px 1em;}
	.topmenu > ul > li > ul > li > a {font-size:14px; color:#fff; font-weight: normal; text-decoration:none; text-transform:uppercase;}
	.topmenu > ul > li > ul > li > a:hover {text-decoration:underline;}
	.topmenu > ul > li > ul > li {background:var(--ok2) no-repeat 6px 7px; background-size:9px auto; padding-left:20px;}
	.topmenu > ul > li > ul > li.active > a {text-decoration:underline;}
}