/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');*/

:root{

/* --campton: 'Campton', sans-serif; */
--default-font-weight: 400;

--tertiary-text:#67747b;
--karabaglar-main-color:#0F4C64;
--karabaglar-dark-color:#043B58;
--karabaglar-light-color:#F2FAFF;

}
/* montserrat-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/montserrat-v31-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-500 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/montserrat-v31-latin_latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-600 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('/fonts/montserrat-v31-latin_latin-ext-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-700 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/montserrat-v31-latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-800 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: url('/fonts/montserrat-v31-latin_latin-ext-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

body {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

a{
text-decoration: none;
}


main {
display: flex;
}
main .content {
width: 92%;
}
main .content .container {
max-width: 1283px;
margin-right: 23px !important;
}
main .right-menu {
width: 8%;
position: relative;
display: flex;
justify-content: center;
z-index: 100;
box-shadow: 0px 1.758px 3.516px 0px rgba(0, 0, 0, 0.04), 0px 6.152px 1.758px 0px rgba(0, 0, 0, 0.00), 0px 4.394px
1.758px 0px rgba(0, 0, 0, 0.01), 0px 0.879px 0.879px 0px rgba(0, 0, 0, 0.09), 0px 0px 1.758px 0px rgba(0, 0, 0, 0.10);
}

main .right-menu .right-list {
position: fixed;
height: 100%;
display: flex;
align-items: center;
}

main .right-menu .right-list ul {
list-style: none;
padding-left: 0;
display: flex;
flex-direction: column;
gap: 32px;
width: 100%;
}

main .right-menu .right-list ul li {
text-align: center;
padding: 17px;
transition: 0.4s ease-in-out;
min-width: 114px;
min-height: 120px;
align-items: center;
display: flex;
justify-content: center;
border-radius: 16px;
}
main .right-menu .right-list ul li a {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
}

main .right-menu .right-list ul li a img {
width: 38px;
}

main .right-menu .right-list ul li a .menu-title p {
color: var(--tertiary-text, #67747B);
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin-bottom:0;
}

main .right-menu .right-list ul.submenu {
flex-direction: row;
position: absolute;
right: 0;
margin-right: 100%;
top: -22%;
width: min-content;
background: #fff;
z-index: 98;
display: none;
padding: 10px;
transition: 0.4s ease-in-out;
border-radius: 16px 0px 0px 16px;
box-shadow: 0px 1.758px 3.516px 0px rgba(0, 0, 0, 0.00), 0px 6.152px 1.758px 0px rgba(0, 0, 0, 0.00), 0px 4.394px
1.758px 0px rgba(0, 0, 0, 0.01), 0px 0.879px 0.879px 0px rgba(0, 0, 0, 0.09), 0px 0px 1.758px 0px rgba(0, 0, 0, 0.10);
}

ul.submenu {}
main .right-menu .right-list ul li:hover{
background-color: #f0f0f0;
transition: 0.4s ease-in-out;
}
main .right-menu .right-list ul li.has-dropdown {
position: relative;
}

main .right-menu .right-list ul li.has-dropdown:hover ul.submenu {
display: flex;
transition: 0.4s ease-in-out;
}





header.header-area {
background: transparent;
position: absolute;
z-index: 150;
width: 92%;
}

header nav .nav-link {
color: #FFF;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
position: relative;
}

header nav .nav-link::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 2px;
background: #FFF;
transition: width 0.3s ease;
}
header nav .nav-link:hover{
color:#fff;
}
header nav .nav-link:hover::after {
width: 100%;
}
header.header-area .logo img {
width: 100%;
height: 115px;
}




section.hero-area .hero-slider-wrapper .hero-static-content{
height: min-content;
min-height: 110vh;
padding: 200px 0px 0px;
}
section.hero-area .hero-slider-wrapper .hero-static-content .hero-text{
display: flex;
flex-direction: column;
gap: 32px;
position: relative;
}
section.hero-area .hero-slider-wrapper .hero-static-content .hero-text h1 {
color: #FFF;
font-size: 46px;
font-style: normal;
font-weight: 600;
line-height: 64px;
}
section.hero-area .hero-slider-wrapper .hero-static-content .hero-text .line{
width: 100%;
height: 1px;
background-color: #fff;
}
section.hero-area .hero-slider-wrapper .hero-static-content .hero-text h1 span {
border-radius: 15px;
background: #FCFCFC;
color: var(--karabaglar-dark-color);
padding: 2px 10px;
}
section.hero-area .hero-slider-wrapper .hero-static-content .hero-text .search-box input{
display: flex;
padding: 12px 16px 12px 50px;
align-items: center;
gap: 16px;
flex: 1 0 0;
align-self: stretch;
border-radius: 10px;
border: 1px solid #ECECEC;
background: #FFF;
}
section.hero-area .hero-slider-wrapper .hero-static-content .hero-text .search-box {
position: relative;
}
section.hero-area .hero-slider-wrapper .hero-static-content .hero-text .search-box img.first-img{
position: absolute;
width: 26px;
top: 20%;
left: 2%;

}
section.hero-area .hero-slider-wrapper .hero-static-content .hero-text .hero-buttons {
width: 100%;
justify-content: space-between;
}

section.hero-area .hero-slider-wrapper .hero-static-content .hero-text .hero-buttons .btn {
width: 30%;
display: flex;
padding: 12px 16px;
justify-content: center;
align-items: center;
gap: 6px;
flex: 1 0 0;
color: #FFF;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
border-radius: 4px;
border: 1px solid #FFF;
background: rgba(255, 255, 255, 0.09);
transition: 0.4s ease-in-out;
}

section.hero-area .hero-slider-wrapper .hero-static-content .hero-text .hero-buttons .btn:hover {
background: #FFF;
color: var(--karabaglar-main-color, #0F4C64);
transition: 0.4s ease-in-out;
}




section.hero-area .hero-slider-wrapper .hero-static-content .mayor-box{
display: inline-flex;
align-items: center;
gap: 16px;
width: 100%;
}

section.hero-area .hero-slider-wrapper .hero-static-content .mayor-box .mayor-img{
border-radius: 100px;
background: #0b3647;
display: flex;
width: 115px;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: stretch;
overflow: hidden;
height: 170px;
}
section.hero-area .hero-slider-wrapper .hero-static-content .mayor-box .mayor-img img{
width: 100%;
height: 100%;
object-fit: cover;
}
section.hero-area .hero-slider-wrapper .hero-static-content .mayor-box .mayor-info{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
align-self: stretch;
width: 77%;
text-align: start;
}
section.hero-area .hero-slider-wrapper .hero-static-content .mayor-box .mayor-info h5{
margin-bottom:0px;
color: #FFF;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
section.hero-area .hero-slider-wrapper .hero-static-content .mayor-box .mayor-info p{
margin-bottom:0px;
color: #EBEBEB;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
}

section.hero-area .hero-slider-wrapper .hero-static-content .mayor-box .mayor-info .mayor-social {
display: flex;
gap: 8px;
font-size: 24px;
}
section.hero-area .hero-slider-wrapper .hero-static-content .mayor-box .mayor-info .mayor-buttons {
width:100%;
}
section.hero-area .hero-slider-wrapper .hero-static-content .mayor-box .mayor-info .mayor-buttons .btn{
border-radius: 6px;
border: 1px solid #FFF;
background: #FFF;
display: flex;
padding: 10px 16px;
justify-content: center;
align-items: center;
gap: 4.465px;
flex: 1 0 0;
color: var(--karabaglar-dark-color, #043B58);
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
transition: 0.4s ease-in-out;
}

section.hero-area .hero-slider-wrapper .hero-static-content .mayor-box .mayor-info .mayor-buttons .btn:hover {
background: rgba(255, 255, 255, 0.09);
color: #FFF;
transition: 0.4s ease-in-out;
}

section .event-banner{
display: flex;
width: 100%;
padding: 16px 24px;
justify-content: center;
align-items: center;
gap: 32px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.30);
background: #0F4C64;
box-shadow: 0px 6px 7.8px 0px rgba(18, 18, 18, 0.08);
position: relative;
overflow: hidden;
}

section .event-banner .event-box-img{
border-radius: 7.564px;
border: 0.63px solid rgba(255, 255, 255, 0.30);
background: linear-gradient(197deg, rgba(255, 255, 255, 0.00) -4.31%, rgba(255, 255, 255, 0.29) 80.47%);
box-shadow: 0px 1.261px 6.808px 0px rgba(0, 0, 0, 0.11);
backdrop-filter: blur(0.6986905932426453px);
display: flex;
width: 150.43px;
height: 79.255px;
padding: 2.521px;
flex-direction: column;
align-items: flex-start;
gap: 6.304px;
}

section .event-banner .event-box-img img{
width:100%;
height: 100%;
object-fit: cover;
}

section .event-banner .event-text-meta{
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 6px;
}
section .event-banner .event-text-meta h5,section .event-banner .event-text-meta h2{
overflow: hidden;
margin-bottom:0;
color: #FFF;
text-overflow: ellipsis;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 0.4px;
/*display: -webkit-box;*/
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
section .event-banner .event-text-meta p{
overflow: hidden;
color: #FFF;
text-overflow: ellipsis;
font-family: Montserrat;
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 11.09px; /* 92.417% */
letter-spacing: -0.24px;
margin-bottom:0;
}
section .event-banner .countdown .time-text {
width: 48px;
text-align: center;
color: #fff;
position: relative;
}
section .event-banner .countdown .time-text:last-child::after{
display: none;
}
section .event-banner .countdown .time-text::after {
content: ":";
position: absolute;
right: -13px;
top: 2px;
font-size: 22px;
font-weight: 600;
}

section .event-banner .btn{
display: flex;
padding: 8px 16px;
align-items: center;
gap: 6px;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.31);
backdrop-filter: blur(3.8499999046325684px);
color: #FFF;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
transition: 0.4s ease-in-out;
}


section .event-banner .btn:hover {
background: #FFF;
color: var(--karabaglar-main-color, #0F4C64);
transition: 0.4s ease-in-out;
}

.elips {
position: absolute;
width: 212px;
height: 212px;
left: 0;
}

.elips img {
width: 100%;
height: 100%;
}

section.hero-area .hero-slider-wrapper .hero-static-content .hero-text h1::before {
content: "";
position: absolute;
top: -5%;
left: -3%;
background-image: url(../images/headerkalp.svg);
width: 100px;
height: 100px;
z-index: 1;
background-repeat: no-repeat;
}
section.hero-area .hero-slider-wrapper .hero-static-content .hero-text h1::after {
content: "";
position: absolute;
bottom: 39%;
left: 0%;
background-image: url(../images/headerline.svg);
width: 200px;
height: 40px;
z-index: 1;
background-repeat: no-repeat;
background-size: contain;
}


.news-area-content .owl-nav{
top: 7%;
}
.owl-nav {
position: absolute;
top: -36rem;
right: 3%;
width: 100%;
transform: translateY(-50%);
display: flex;
justify-content: end;
gap: 10px;
z-index: 100;
}
.owl-nav button i {
color: #fff;
}
.owl-nav button {
display: flex;
width: 40px;
height: 40px;
padding: 15px 12.5px 12.5px 12.5px !important;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 32px;
border-radius: 100px;
border: 1px solid rgba(255, 255, 255, 0.30) !important;
background: #0F4C64 !important;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.11), 0px 19px 5.5px -14px rgba(0, 0, 0, 0.12), 0px 4px 16px 0px rgba(18, 18,
18, 0.20);
transition: 0.3s;
}

.owl-nav button:hover {
background: #fff;
}

.owl-dots {
position: absolute;
right: 0%;
transform: translateX(-50%);
top: -34rem;
}

.owl-dot span {
width: 10px;
height: 10px;
background: #c1c1c1;
display: block;
margin: 5px;
border-radius: 50%;
opacity: 1;
transition: all 0.3s ease;
filter: drop-shadow(0px 19px 5.5px rgba(0, 0, 0, 0.12));
}

.owl-dot.active span {
opacity: 1;
background: #fff;
border: 1px solid #c1c1c1;
padding:1px;

}

.news-area{
padding: 80px 0;
}

.title-text h3{
color: var(--karabaglar-dark-color, #043B58);
font-size: 30px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.news-area .notice-area{
display: flex;
flex-direction: column;
gap: 48px;
}
.news-area .news-area-content{
display: flex;
flex-direction: column;
gap:48px;
}
.news-area .news-title-area{
width: 100%;
border-bottom: 1px solid #EBEBEB;
}
.news-area .news-area-content .news-content .news-item {
border-radius: 16px;
height: 560px;
position: relative;
padding: 24px;
background-size: cover;
align-items: end;
display: flex;
}
.news-area .news-area-content .news-content .news-item .news-item-text{
display: flex;
flex-direction: column;
gap: 12px;
padding: 15px;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-xl, 12px);
border-radius: 16px;
border: 1px solid #98A2B3;
background: rgba(98, 98, 98, 0.55);
backdrop-filter: blur(9.649999618530273px);
width: 100% ;
}


.news-area .news-area-content .news-content .news-item .news-item-text .news-item-meta {
display: flex;
justify-content: space-between;
align-items: flex-start;
align-self: stretch;
}


.news-area .news-area-content .news-content .news-item .news-item-text .news-item-meta .badge{
border-radius: var(--radius-md, 8px);
border: 1px solid #EAECF0;
background: #F9FAFB;
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.03);
display: flex;
padding: var(--spacing-xs, 4px) 10px;
align-items: center;
}

.news-area .news-area-content .news-content .news-item .news-item-text .news-item-meta .badge p{
color: #344054;
text-align: center;
font-family: Montserrat;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 142.857% */
margin-bottom:0px;
}

.news-area .news-area-content .news-content .news-item .news-item-text .news-item-meta .date{
color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 150% */
margin-bottom:0px;
}

.news-area .news-area-content .news-content .news-item .news-item-text .news-item-title h4{
color: #FFF;
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 40px; /* 125% */
letter-spacing: -0.64px;
}

.news-area .news-area-content .news-content .news-item .news-item-text p{
overflow: hidden;
color: #FFF;
text-overflow: ellipsis;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
align-self: stretch;
}

.news-area .notice-area .notice-list{
display: flex;
padding: 24px;
justify-content: center;
align-items: flex-start;
gap: 24px;
flex: 1 0 0;
align-self: stretch;
border-radius: 16px;
border: 1px solid #A1D7F8;
background: #F2FAFF;
flex-direction: column;
}

.news-area .notice-area .notice-list .notice-box{
display: flex;
padding: 16px;
align-items: center;
gap: 16px;
align-self: stretch;
border-radius: var(--radius-2xl, 16px);
border: 1px solid #F2F4F7;
background: #FFF;
}
.news-area .notice-area .notice-list .notice-box .notice-img img{
width: 100%;
height: 100%;
object-fit: contain;
}
.news-area .notice-area .notice-list .notice-box .notice-img{
width: 40%;
align-self: stretch;
border-radius: 12px;
height: 120px;
overflow: hidden;
}
.news-area .notice-area .notice-list .notice-box .notice-text{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
align-self: stretch;
width: 60%;
justify-content: space-between;
}
.news-area .notice-area .notice-list .notice-box .notice-text h5{
color: var(--karabaglar-dark-color, #043B58);
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin-bottom: 0;
}
.news-area .notice-area .notice-list .notice-box .notice-text h4{
color: var(--karabaglar-dark-color, #043B58);
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin-bottom: 0;
text-transform:uppercase;
}
.news-area .notice-area .notice-list .notice-box .notice-text p{
overflow: hidden;
color: var(--text-body, #45555D);
/* text-overflow: ellipsis; */
font-style: normal;
font-weight: 500;
line-height: normal;
font-size: 12px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
/* align-self: stretch; */
margin-bottom: 0;
}
.news-area .notice-area .notice-list .notice-box .notice-text small{
color: var(--tertiary-text, #67747B);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-bottom: 0;
}



.fast-access-area {
padding: 0px 0 80px;
}
.fast-access-area .desc-text p{
color: var(--Brand-Neutral-neutral-700, #A8ADB2);
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 130%;
}
.fast-access-area .fast-access-item{
display: flex;
width: 100%;
height: 220px;
padding: 24px;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
border-radius: 16px;
margin-top: 24px;
position: relative;
background-size: cover !important;
}

.fast-access-area .fast-access-item h5{
color: #FFF;
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: -0.33px;
position: relative;
z-index: 1;
}
.fast-access-area .fast-access-item strong{
color: #FFF;
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: -0.33px;
position: relative;
z-index: 1;
}

.fast-access-area .fast-access-item div{
display: flex;
width: 42px;
height: 42px;
padding: 8.399px 8.401px 8.401px 8.399px;
justify-content: center;
align-items: center;
border-radius: 105px;
background: #FFF;
position: relative;
z-index: 1;
}



.fast-access-area .fast-access-item div i{
color: #CA1757;
}


.fast-access-area .detail-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: #fff;
color: #c21757;
padding: 6px 16px;
border-radius: 999px;
font-weight: 600;
font-size: 14px;
position: relative;
overflow: hidden;
text-decoration: none;
transition: all 0.3s ease-in-out;
}

.fast-access-area .detail-btn .text {
opacity: 0;
white-space: nowrap;
overflow: hidden;
transition: all 0.3s ease-in-out;
display: none;
}

.fast-access-area .detail-btn i {
transition: transform 0.3s ease;
}

/* Hover’da yazı görünür, ikon hafif sağa kayar */
.fast-access-item:hover .detail-btn {
width: 135px !important;
text-align: center;
}
.fast-access-item:hover .detail-btn .text {
width: 100px !important;
opacity: 1;
display: block;
}

.fast-access-item:hover .detail-btn i {
transform: translateX(3px);
width: 30px;
}

i.fas.fa-arrow-right {}




.fast-access-area .fast-access-item::after {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border-radius: 16px;
background: linear-gradient(0deg, rgba(202, 23, 87, 0.80) 0%, rgba(202, 23, 87, 0.80) 100%);
opacity: 1;
z-index: 0;
transition: opacity 0.4s ease-in-out;
}

.fast-access-area .fast-access-item:hover::after {
opacity: 0.1;
}

.event-area{
padding:0 0 80px;
}

.event-area .event-area-content{
border-radius: 16px;
border: 1px solid #EBEBEB;
background: var(--Main-white, #FFF);
box-shadow: 0px 1.758px 3.516px 0px rgba(0, 0, 0, 0.04), 0px 6.152px 1.758px 0px rgba(0, 0, 0, 0.00), 0px 4.394px
1.758px 0px rgba(0, 0, 0, 0.01), 0px 0.879px 0.879px 0px rgba(0, 0, 0, 0.09), 0px 0px 1.758px 0px rgba(0, 0, 0, 0.10);
padding: 16px;
align-items: center;
gap: 24px;
}

.event-area .event-calendar-box{
display: flex;
padding: 24px;
justify-content: center;
flex-direction: column;
gap: 36px;
flex: 1 0 0;
border-radius: 16px;
border: 1px solid #A1D7F8;
background: #F2FAFF;
}

.event-area .event-calendar-box .news-title-area {
width: 100%;
}

.event-area .event-calendar-box .news-title-area .title-text h3 {
margin-bottom: 0;
}
.event-area .event-calendar-box .event-date-tabs {
display: flex;
align-items: center;
gap: 16px;
align-self: stretch;
}
.event-area .event-calendar-box .event-date-tabs .date-box{
display: flex;
padding: 12px;
flex-direction: column;
justify-content: center;
align-items: flex-end;
gap: 4px;
flex: 1 0 0;
border-radius: 8px;
border: 1px solid #5CC1FF;
background: rgba(161, 215, 248, 0.00);
}
.event-area .event-calendar-box .event-date-tabs .date-box{
color: #105985;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.event-area .event-calendar-box .event-date-tabs .date-box:hover{
border: 1px solid #5CC1FF;
background: #A1D7F8;
box-shadow: 0px 4px 9.2px 0px rgba(224, 243, 255, 0.30) inset, 0px 1px 1.5px 0px rgba(13, 13, 13, 0.20);
transition: 0.4s ease-in-out;
cursor:pointer;
}
.event-area .event-calendar-box .event-date-tabs .date-box.active{
border-radius: 8px;
border: 1px solid #5CC1FF;
background: #A1D7F8;
box-shadow: 0px 4px 9.2px 0px rgba(224, 243, 255, 0.30) inset, 0px 1px 1.5px 0px rgba(13, 13, 13, 0.20);
transition: 0.4s ease-in-out;
}
.event-area .event-calendar-box .event-date-tabs .date-box strong {
font-size: 24px;
}
.event-area .event-calendar-box .event-card{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-none, 0px);
flex: 1 0 0;
align-self: stretch;
border-radius: var(--radius-2xl, 16px);
border: 1px solid var(--Colors-Border-border-tertiary, #F2F4F7);
background: var(--Colors-Foreground-fg-white, #FFF);
overflow: hidden;
}
.event-area .event-calendar-box .event-card .event-img{
position: relative;
width: 100%;
height: 240px;
}

.event-area .event-calendar-box .event-card:hover .event-img img{
transform: scale(1.08);
transition: transform 0.4s ease-in-out;
}
.event-area .event-calendar-box .event-card .event-img img{
width:100%;
height: 100%;
object-fit: fill;
transition: transform 0.4s ease-in-out;
}
.event-info{
    position: relative;
}
.day-tag-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.event-area .event-calendar-box .event-card .event-info .event-day{
display: flex;
width: 72px;
height: 72px;
padding: 8.629px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2.876px;
flex-shrink: 0;
border-radius: 5.753px;
border: 0.719px solid #DDD;
background: #FAFAFA;
position: relative;
color: var(--Karabalar-Brand, #043B58);
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-align: center;
}

.event-area .event-calendar-box .event-card .event-info{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-md, 8px);
flex: 1 0 0;
align-self: stretch;
padding: 16px;
min-height: 190px;
justify-content: space-between;
}
.event-area .event-calendar-box .event-card .event-info p {
color: var(--text-body, #45555D);
font-size: var(--Typography-Font-Size-text-sm, 16px);
font-style: normal;
font-weight: 400;
line-height: var(--Line-Height-20, 20px);
margin-bottom: 0;
}

.event-area .event-calendar-box .event-card .event-info h5{
overflow: hidden;
color: var(--Karabalar-Brand, #043B58);
font-family: Montserrat;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px;
position: relative;
}

.event-area .event-calendar-box .event-card .event-info h5::after {
content: "";
position: absolute;
left: 0;
bottom: 0px;
width: 0;
height: 2px;
background: var(--Karabalar-Brand, #043B58);
transition: width 0.3s ease;
}

.event-area .event-calendar-box .event-card .event-info span.title_ac{
overflow: hidden;
color: var(--Karabalar-Brand, #043B58);
font-family: Montserrat;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px;
position: relative;
}

.event-area .event-calendar-box .event-card .event-info span.title_ac::after {
content: "";
position: absolute;
left: 0;
bottom: 0px;
width: 0;
height: 2px;
background: var(--Karabalar-Brand, #043B58);
transition: width 0.3s ease;
}

.event-area .event-calendar-box .event-card:hover .event-info h5::after {
width: 100%;
}
.event-area .event-calendar-box .event-card .event-info .event-tags{
display: flex;
align-items: center;
gap: 8px;
align-self: stretch;
}
.event-area .event-calendar-box .event-card .event-info .event-tags .tag{
display: flex;
padding: var(--spacing-xs, 4px) 10px;
align-items: center;
border-radius: var(--radius-md, 8px);
border: 1px solid #A7F3D0;
background: #ECFDF5;
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.03);
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 142.857% */
}

.tag.cocuk{
border: 1px solid #A7F3D0 !important;
background: #ECFDF5 !important;
color: #059669 !important;

}

.tag.tiyatro{
border: 1px solid #B5DCFF !important;
background: #EDF7FF !important;
color:#034DFF !important;
}

.tag.festival{
border: 1px solid #E9D5FF !important;
background: #FAF5FF !important;
color: #7E22CE !important;
}

.calendar-filter .btn {
border-radius: var(--radius-md, 8px);
border: 1px solid #D0D5DD;
background: #FFF;
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
color: var(--text-body, #45555D);
font-family: Montserrat;
font-size: 18px;
font-style: normal;
padding: 10px 14px;
font-weight: 500;
line-height: 20px; /* 111.111% */
}

.event-area .social-media-box {
display: flex;
padding: 24px;
justify-content: center;
align-items: flex-start;
flex-direction: column;
gap: 24px;
flex: 1 0 0;
align-self: stretch;
border-radius: 16px;
border: 1px solid #E9E9E9;
background: #F8F8F8;
height: 100%;
}
.social-media-content {
height: 100%;
width: 100%;
}
.social-media-content img{
height: 100%;
object-fit: cover;
}


footer{
background-color: #0F4C64;
display: flex;
padding-top: 60px;
flex-direction: column;
align-items: flex-start;
gap: 0px;
position: relative;
z-index: 999;
background-image: url(../images/Pattern.png);
}
footer.footer-area .footer-logo img {
width: 200px;
}

footer.footer-area h6{
color: #FFF;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 0.54px;
position: relative;
}
footer.footer-area h6::after{
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 50px;
height: 1px;
background-color: #FFF;
}

footer.footer-area span.footer-title-h{
color: #FFF;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 0.54px;
position: relative;
}
footer.footer-area span.footer-title-h::after{
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 50px;
height: 1px;
background-color: #FFF;
}
footer.footer-area .footer-links {
list-style: none;
padding-left: 0;
margin-top: 30px;
gap: 14px;
display: flex;
flex-direction: column;
}
footer.footer-area .footer-links li a{
color: #FFF;
font-family: Montserrat;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: normal;
position: relative;
}

footer.footer-area .footer-links li a::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 2px;
background: #FFF;
transition: width 0.3s ease;
}

footer.footer-area .footer-links li a:hover::after {
width: 100%;
}

footer.footer-area .footer-contact {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 26px;
margin-top: 30px;
list-style:none;
padding-left: 0;
}
footer.footer-area .footer-contact li {
color: #FFF;
font-family: Montserrat;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: normal;
display: flex;
gap: 8px;
align-items: center;
}

footer.footer-area .footer-contact .whatsapp-box {
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.31);
background: rgba(91, 91, 91, 0.16);
box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.25) inset, 0px 1px 2px 0px rgba(18, 18, 18, 0.02), 0px 12px 8px -14px
rgba(18, 18, 18, 0.04), 0px 4px 16px 0px rgba(18, 18, 18, 0.08);
backdrop-filter: blur(3.8499999046325684px);
display: flex;
padding: 12px 16px;
justify-content: center;
align-items: center;
transition: 0.4s ease-in-out;
gap: 16px;
}
footer.footer-area .footer-contact .whatsapp-box:hover {
transition: 0.4s ease-in-out;
backdrop-filter: blur(0);
background: rgba(91, 91, 91, 0);
cursor:pointer;
}


footer.footer-area .footer-middle{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}

footer.footer-area .footer-middle h6{
color: #FFF;
font-family: Montserrat;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: normal;
}


footer.footer-area .footer-middle p{
color: #F0F0F0;
font-family: Montserrat;
font-size: 18px;
font-style: normal;
font-weight: 400;
margin-top: 20px;
line-height: normal;
}

footer.footer-area .footer-middle input{
border-radius: 8px;
border: 1px solid #D2D2D2;
background: #FFF;
box-shadow: 0px 2px 3px 0px rgba(11, 11, 11, 0.04);
display: flex;
padding: 14px 16px;
align-items: center;
height: 48px;
}
footer.footer-area .footer-middle button{
width: 144px;
display: flex;
padding: 10px 14px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 8px;
background: #FFF;
color: var(--Karabalar-Brand, #043B58);
font-family: Montserrat;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
transition: 0.4s ease-in-out;
border: none;
}
footer.footer-area .footer-middle button:hover{
background: var(--karabaglar-dark-color, #043B58);
color:#fff;
transition: 0.4s ease-in-out;
}
.border-left {
position: relative;
}

.border-left::before {
content: "";
width: 1px;
height: 100%;
position: absolute;
left: 0%;
top: 0;
background: rgba(255, 255, 255, 0.30);
}
footer.footer-area .footer-qr{
display: flex;
padding: 0px 60px;
flex-direction: column;
justify-content: flex-end;
align-items: center;
gap: 24px;
flex: 1 0 0;
align-self: stretch;
}
footer.footer-area .footer-qr .top-qr{
display: flex;
align-items: flex-start;
gap: 18.663px;
text-align: center;
}

footer.footer-area .footer-qr .top-qr p{
color: #FFF;
text-align: center;
font-family: Montserrat;
font-size: 12.463px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-bottom:0;
}
footer.footer-area .footer-qr .bottom-qr img{
width: 100%;
height: 100%;

}
footer.footer-area .web-sites{
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
align-self: stretch;
margin-top: 70px;
}
footer.footer-area .web-sites p{
color: #FFF;
font-family: Montserrat;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
margin-top: 0;
margin-bottom: 0;
}
footer.footer-area .web-sites img{
height: 70px;
object-fit: contain;
border-right: 1px solid #ffffff50;
/* padding: 0px 15px 0px 10px; */
}
footer.footer-area .web-sites img:last-child{
border-right: none;
}
footer.footer-area .web-sites img:first-child{
padding-left: 0px;
}

.social-list {
display: flex;
gap: 18px;
font-size: 22px;
margin-left:20px;
}

footer.footer-area .footer-bottom {
display: flex;
padding: 12px 30px;
align-items: center;
gap: 10px;
background: #09384b;
justify-content: space-between;
border: 0px !important;
}
footer.footer-area .footer-bottom p {
color: #FFF;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
footer.footer-area .footer-bottom p a{
color: #FFF;
padding: 0px 2px;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
border-bottom: 2px solid #0b74ab00;
}
footer.footer-area .footer-bottom p a:hover{ border-bottom: 2px solid #fff; }
footer.footer-area .footer-bottom .tigonlogo img {
width: 14px;
}




.search-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-top: 10px;
z-index: 999;
display: none;
}

.search-dropdown h6 {
font-weight: 600;
margin-bottom: 8px;
font-size: 14px;
color: #333;
}

.search-dropdown ul {
list-style: none;
padding: 0;
margin: 0 0 15px;
}

.search-dropdown ul li {
padding: 4px 0;
font-size: 14px;
color: #444;
}

.search-footer {
background-color: #f0f4f7;
font-size: 14px;
}

.owl-carousel {
z-index: 100;
}


.hero-slider-wrapper-wrapper {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: background-image 0.6s ease-in-out;
}

.hero-static-content {
position: relative;
z-index: 97;
}


.search-dropdown{
display: flex;
padding: 24px 32px;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
border-radius: 10px;
background: #FDFDFD;
box-shadow: 0px 241px 68px 0px rgba(0, 0, 0, 0.00), 0px 154px 62px 0px rgba(0, 0, 0, 0.01), 0px 87px 52px 0px rgba(0, 0,
0, 0.05), 0px 39px 39px 0px rgba(0, 0, 0, 0.09), 0px 10px 21px 0px rgba(0, 0, 0, 0.10);
}
.search-dropdown .dropdown-section{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
align-self: stretch;
}

.search-dropdown .dropdown-section h6{
color: var(--Karabalar-Brand, #043B58);
font-family: Montserrat;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: normal;
margin-bottom:0;
}
.search-dropdown .dropdown-section ul {
padding-left:10px;
margin-bottom:0;
display: flex;
flex-direction: column;
gap: 8px;
}
.search-dropdown .dropdown-section ul li, .search-dropdown .dropdown-section ul li a{
color: var(--text-body, #45555D);
font-family: Montserrat;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: -0.2px;
margin-bottom:0;
}

.search-dropdown .dropdown-section .service-buttons{
display: flex;
align-items: flex-start;
gap: 16px;
overflow-x: scroll;
width: 100%;
}

.search-dropdown .dropdown-section .service-buttons .btn{
border-radius: 12px;
border: 1px solid #F2F4F7;
background: var(--Main-white, #FFF);
display: flex;
padding: 16px 32px;
align-items: center;
gap: 16px;
transition: 0.4s ease-in-out;
}


.search-dropdown .dropdown-section .service-buttons .btn:hover{
background-color: var(--karabaglar-dark-color, #043B58);
color: #fff;
transition: 0.4s ease-in-out;
}
.search-dropdown .dropdown-section .service-buttons .btn:hover img{
filter: brightness(0) saturate(100%) invert(100%) sepia(7%) saturate(7447%) hue-rotate(196deg) brightness(102%)
contrast(111%);
}

.search-footer-area {
display: flex;
padding: 12px 16px;
justify-content: space-between;
align-items: center;
align-self: stretch;
border-radius: 10px;
background: #043B58;
color: var(--Main-white, #FFF);
font-family: Montserrat;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

.search-footer-area .btn{
border-radius: 8px;
background: var(--Main-white, #FFF);
display: flex;
padding: 14px 24px;
justify-content: center;
align-items: center;
gap: 8px;
color:var(--karabaglar-dark-color, #043B58);
border: none;
}
.event-calendar-box > .row {
min-height: 420px;
}

.instagram-post img {
height: 450px;
object-fit: cover;
}

.social_content.owl-loaded {max-height: 450px;}

.social_content.owl-loaded img {
height: 100%;
width: 100%;
display: flex;
object-fit: cover;
border-radius: 15px;
}

.social-media-content {
max-width: 100%;
width: 100%;
margin: 0 auto;
}

.social-media-content .owl-carousel .item img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
max-height: 550px;
}
.insta-card {
min-height: 550px;
position: relative;
border-radius: 10px;
overflow: hidden;
}

.insta-card img {
height: 100%;
}

.insta-image-wrapper {
height: 550px;
border-radius: 15px;
}
.insta-caption {
position: absolute;
bottom: 0px;
width: 100%;
height: 86px;
background-color: #033b58;
color: #fff;
padding: 10px;
padding-bottom: 10px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}

.carousel-btn button {
width: 40px;
height: 40px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 32px;
border-radius: 100px;
border: 1px solid rgba(255, 255, 255, 0.30) !important;
background: #0F4C64 !important;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.11), 0px 19px 5.5px -14px rgba(0, 0, 0, 0.12), 0px 4px 16px 0px rgba(18, 18,
18, 0.20);
transition: 0.3s;
color: #fff;
}
a.instagram-post {
overflow: hidden;
border-radius: 15px;
}


.sub-banner-area {
height: 325px;
flex-shrink: 0;
border-radius: 45px;
margin: 10px 10px;
position: relative;
display: flex;
align-items: center;
padding-top: 100px;
padding-left: 80px;
overflow: hidden;
}
.sub-banner-area::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 16px;
background: url(../images/subbannerkarabaglar.png);
background-position-x: 23%;
background-position-y: 26%;
background-repeat: no-repeat;
}
.sub-banner-area.area-blue{
background: linear-gradient(0deg, #EBF9FB 0%, #EAF4FD 99.47%);
}
.sub-banner-area.area-green{
background: linear-gradient(0deg, #EBFBED 0%, #EAFDF0 99.47%);
}
.sub-banner-area.area-pink{
background: linear-gradient(0deg, #FBEBF5 0%, #FDEAEE 99.47%);
}
.sub-banner-area.area-orange{
background: linear-gradient(0deg, #FBEBEB 0%, #FDEAEA 99.47%);
}
.sub-banner-area.area-yellow{
background: linear-gradient(0deg, #FFF6E9 0%, #FDF8EA 99.47%);
}
.sub-banner-area.area-purple{
background: linear-gradient(0deg, #F9EBFB 0%, #FDEAF6 99.47%);
}

.sub-banner-area.area-haber{
background: linear-gradient(0deg, #EBEEFB 0%, #EAEDFD 99.47%);
}
.sub-banner-area .sub-banner-content{
display: flex;
flex-direction: column;
gap: 16px;
}

.sub-banner-area .sub-banner-content .title-text h2 {
color: var(--Karabalar-Brand, #043B58);
text-shadow: 0 1.5px 2.5px rgba(4, 59, 88, 0.34);
font-size: 45px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin-bottom: 0;
z-index: 1;
position: relative;
}


.sub-banner-area .sub-banner-content nav .breadcrumb-list{
display: flex;
gap: 8px;
padding-left: 0;
list-style: none;
}


.sub-banner-area .sub-banner-content nav .breadcrumb-list li a{
color: var(--Text-Text-Light-300, #5E8797);
font-family: Montserrat;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 24px;
}


.sub-banner-area .sub-banner-content nav .breadcrumb-list{
color: var(--Text-Text-Light-300, #5E8797);
font-size: 14px;
align-items: center;
}
.sub-banner-area .sub-banner-content nav .breadcrumb-list li.active{
color: var(--Text-Text-Light-300, #5E8797);
font-family: Montserrat;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 24px;
}



.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.tab-btn.active {
background-color: #0f4c64;
color: white;
}


section.content-area {
padding: 60px 0px;
}

.content-area .sidebar{
display: flex;
width: 100%;
padding: 16px;
flex-direction: column;
align-items: flex-start;
gap: 32px;
border-radius: 16px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.70) 0%, #FFF 100%);
box-shadow: 0 -2px 0.5px 0 rgba(15, 76, 100, 0.04) inset, 0 -3px 3px 0 rgba(15, 76, 100, 0.04) inset, 0 0 0 1px rgba(15,
76, 100, 0.04), 0 1px 2px 0 rgba(15, 76, 100, 0.08), 0 6px 16px 0 rgba(15, 76, 100, 0.04);
backdrop-filter: blur(2px);
position: relative;
overflow:hidden;
}
.content-area .sidebar::after{
content: "";
position: absolute;
right: -42%;
width: 100%;
height: 135px;
border-radius: 16px;
background: url(../images/sidebarkarabaglar.png);
background-position-x: 30%;
background-position-y: -30%;
background-repeat: no-repeat;
z-index: -1;
bottom: -1%;
}
.content-area .sidebar .search-box {
width: 100%;
}
.content-area .sidebar .search-box input{
display: flex;
padding: 10px 14px 10px 34px;
align-items: center;
gap: var(--spacing-md, 8px);
align-self: stretch;
border-radius: var(--radius-md, 8px);
border: 1px solid var(--Text-Text-Stoke-50, #E7EDF0);
background: #FFF;
box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
}
.content-area .sidebar .search-box {
position: relative;
}
.content-area .sidebar .search-box img{
position: absolute;
width: 26px;
top: 20%;
left: 2%;
}

.content-area .sidebar .sidebar-menu{
list-style: none;
display: flex;
flex-direction: column;
gap:4px;
padding-left:0px;
width: 100%;
margin-bottom: 0;
}


.content-area .sidebar .sidebar-menu span{
color: var(--Text-Text-Strong-800, #082A37);
font-family: Montserrat;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 142.857% */
}
.content-area .sidebar .sidebar-menu li a{
padding-left:16px;
color: var(--Text-Text-Light-300, #5E8797);
font-family: Montserrat;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
display: flex;
min-height: 44px;
padding: var(--spacing-md, 8px) var(--spacing-lg, 12px);
align-items: center;
gap: var(--spacing-md, 8px);
align-self: stretch;
transition: 0.4s ease-in-out;
}
.content-area .sidebar .sidebar-menu li.active a{
border-radius: var(--spacing-sm, 6px);
background: rgba(4, 59, 88, 0.06);
box-shadow: 0 10px 10.1px -12px rgba(0, 41, 63, 0.16), 0 1px 1.4px 0 rgba(0, 41, 63, 0.12);
color: var(--Text-Text-Medium-700, #0B3647);
}
.content-area .sidebar .sidebar-menu li:hover a{
border-radius: var(--spacing-sm, 6px);
background: rgba(4, 59, 88, 0.06);
box-shadow: 0 10px 10.1px -12px rgba(0, 41, 63, 0.16), 0 1px 1.4px 0 rgba(0, 41, 63, 0.12);
transition: 0.4s ease-in-out;
color: var(--Text-Text-Medium-700, #0B3647);
}


.content-area .report-tabs{
display: flex;
align-items: center;
gap: 20px;
align-self: stretch;
flex-wrap: wrap;
}
.content-area .report-tabs .tab-btn{
border-radius: 8px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.70) 0%, #FFF 100%);
box-shadow: 0 -2px 0.5px 0 rgba(15, 76, 100, 0.04) inset, 0 -3px 3px 0 rgba(15, 76, 100, 0.04) inset, 0 0 0 1px rgba(15,
76, 100, 0.04), 0 1px 2px 0 rgba(15, 76, 100, 0.08), 0 6px 16px 0 rgba(15, 76, 100, 0.04);
backdrop-filter: blur(2px);
display: flex;
height: 56px;
justify-content: center;
align-items: center;
gap: 20px;
flex: 1 0 0;
color: var(--Text-Text-Medium-700, #0B3647);
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 24px;
flex: 1 1 calc(33.333% - 1rem);
max-width: calc(33.333% - 1rem);
transition: 0.4s ease-in-out;
white-space: normal;
text-align: center;
word-break: break-word;
}

.content-area .report-tabs.tab-col-6 .tab-btn{
flex: 1 1 calc(50% - 1rem);
max-width: calc(50% - 1rem);
}

.content-area .report-tabs .tab-btn:hover{
background: linear-gradient(180deg, rgba(15, 76, 100, 0.90) 0%, #0F4C64 100%);
box-shadow: 0 -2px 0.5px 0 rgba(4, 26, 34, 0.12) inset, 0 -3px 3px 0 rgba(3, 22, 29, 0.08) inset, 0 0 0 1px #0F4C64, 0
1px 2px 0 rgba(0, 41, 63, 0.08), 0 6px 16px 0 rgba(0, 41, 63, 0.04);
backdrop-filter: blur(2px);
color: #fff;
transition: 0.4s ease-in-out;
}
.content-area .report-tabs .tab-btn.active{
background: linear-gradient(180deg, rgba(15, 76, 100, 0.90) 0%, #0F4C64 100%);
box-shadow: 0 -2px 0.5px 0 rgba(4, 26, 34, 0.12) inset, 0 -3px 3px 0 rgba(3, 22, 29, 0.08) inset, 0 0 0 1px #0F4C64, 0
1px 2px 0 rgba(0, 41, 63, 0.08), 0 6px 16px 0 rgba(0, 41, 63, 0.04);
backdrop-filter: blur(2px);
color: #fff;
}

.content-area .content-main{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 38px;
flex: 1 0 0;
}


.content-area .content-main .report-list{
border-radius: 16px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.70) 0%, #FFF 100%);
box-shadow: 0 -2px 0.5px 0 rgba(15, 76, 100, 0.04) inset, 0 -3px 3px 0 rgba(15, 76, 100, 0.04) inset, 0 0 0 1px rgba(15,
76, 100, 0.04), 0 1px 2px 0 rgba(15, 76, 100, 0.08), 0 6px 16px 0 rgba(15, 76, 100, 0.04);
backdrop-filter: blur(2px);
display: flex;
padding: 16px;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}
.content-area .content-main .report-list .report-item:hover{
box-shadow: 0 3px 5px 0 rgba(15, 76, 100, 0.15), 0 0 0 1px rgba(15, 76, 100, 0.15);
transition: 0.4s ease-in-out;
}

.content-area .content-main .report-list .report-item{
border-radius: 10px;
background: #FFF;
display: flex;
padding: 10px;
justify-content: space-between;
align-items: center;
align-self: stretch;
transition: 0.4s ease-in-out;
box-shadow: 0 1px 2px 0 rgba(15, 76, 100, 0.08), 0 0 0 1px rgba(15, 76, 100, 0.08);
}

.content-area .content-main .report-list .report-item .report-inside{
display: flex;
align-items: center;
gap: 10px;
}

.content-area .content-main .report-list .report-item .report-inside span{
color: var(--Text-Text-Medium-700, #0B3647);
font-family: Montserrat;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
}

.content-area .content-main .card-tabs .card-img-item{
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0px;
flex: 1 0 0;
padding:5px;
border-radius: 15px;  
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.50); /* Kartlara yumuşak gölge */
transition: box-shadow 0.3s ease-in-out; /* Hover efekti için */
text-decoration: none !important;
height: 100%;
overflow: hidden;
}


.content-area .content-main .card-tabs .card-img-item .img-content{
display: flex;
padding: 5px;
align-items: center;
gap: 10px;
align-self: stretch;
border-radius: 10px;
background: #FFF;
transition: 0.4s ease-in-out;
/* box-shadow: 0 1px 2px 0 rgba(15, 76, 100, 0.08), 0 0 0 1px rgba(15, 76, 100, 0.08); */
}
.content-area .content-main .card-tabs .card-img-item .img-content:hover{
/* box-shadow: 0 3px 5px 0 rgba(15, 76, 100, 0.15), 0 0 0 1px rgba(15, 76, 100, 0.15); */
transition: 0.4s ease-in-out;
}
.content-area .content-main .card-tabs .card-img-item .img-content img{
border-radius: 10px 10px 0 0;
/* height: 258.013px; */
flex: 1 0 0;
aspect-ratio: 268.33/158.01;
width: 100%;
object-fit: cover;

}
.content-area .content-main .card-tabs .card-img-item .card-text-content {
text-align: center;
width: 100%;
padding: 15px; /* Metin alanına boşluk */
flex-grow: 1; /* Başlık alanını kartın kalanına yayar */
display: flex;
flex-direction: column;
justify-content: center; /* Başlık ve butonu ayırır */
}
.content-area .content-main .card-tabs .card-img-item .card-text-content h3{
color: var(--Text-Text-Medium-700, #043b58);
text-align: center;
font-family: Montserrat;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 1.4;
display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.g-20-0{
gap:20px 0px;
}


.content-area .contact-form{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
align-self: stretch;
}
.content-area .contact-form .form-row{
display: flex;
align-items: flex-start;
gap: 24px;
align-self: stretch;
}
.content-area .contact-form .form-row .form-group{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
flex: 1 0 0;
position: relative;
}

.content-area .contact-form .form-row .form-group .char-count{
position: absolute;
right: 5%;
bottom: 5%;
color: var(--Color-Text-text-soft-400, #99A0AE);
font-size: var(--fontsize-subheading-2xsm, 11px);
font-style: normal;
font-weight: 500;
line-height: var(--line-height-subheading-2xsm, 12px);
letter-spacing: 0.22px;
text-transform: uppercase;
}

.content-area .contact-form .form-row .form-group label{
color: var(--Text-Text-Strong-800, #082A37);
font-family: Montserrat;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.content-area .contact-form .form-row .form-group input{
border-radius: 8px;
background: #FFF;
box-shadow: 0 2px 6px 0 rgba(15, 76, 100, 0.04), 0 1px 2px 0 rgba(15, 76, 100, 0.08), 0 0 0 1px rgba(15, 76, 100, 0.08);
display: flex;
padding: 8px 12px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
align-self: stretch;
border: none;
}

.content-area .contact-form .form-row .form-group textarea{
display: flex;
height: 120px;
padding: 8px 12px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
align-self: stretch;
border-radius: 8px;
background: #FFF;
border: none;
box-shadow: 0 2px 6px 0 rgba(15, 76, 100, 0.04), 0 1px 2px 0 rgba(15, 76, 100, 0.08), 0 0 0 1px rgba(15, 76, 100, 0.08);
}
.content-area .contact-form .form-upload{
width: 100%;
}
.content-area .contact-form .form-upload label{
display: flex;
padding: var(--spacing-3xl, 24px) var(--spacing-4xl, 32px);
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--spacing-2xl, 20px);
align-self: stretch;
border-radius: var(--radius-xl, 12px);
border: 1px dashed rgba(15, 76, 100, 0.20);
background: #FFF;
cursor: pointer;
transition: 0.4s ease-in-out;
}
.content-area .contact-form .form-upload label:hover{
border: 1px solid rgba(15, 76, 100, 0.20);
transition: 0.4s ease-in-out;
box-shadow: 0 2px 6px 0 rgba(15, 76, 100, 0.04), 0 1px 2px 0 rgba(15, 76, 100, 0.08), 0 0 0 1px rgba(15, 76, 100, 0.08);
}

.content-area .contact-form .form-upload label .upload-text {
color: var(--Color-Text-text-strong-950, #0E121B);
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px;
letter-spacing: -0.14px;
}

.content-area .contact-form .form-upload label .upload-format {
color: var(--Color-Text-text-sub-600, #525866);
text-align: center;
font-family: Montserrat;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 16px;
}
.content-area .contact-form .form-submit{
width: 100%;
display: flex;
justify-content: end;
}
.content-area .contact-form .form-submit button{
border-radius: 8px;
display: flex;
padding: 10px 16px;
justify-content: center;
align-items: center;
gap: 4px;
color: var(--Karabalar-Brand, #043B58);
font-size: 14px;
font-style: normal;
font-weight: 600;
border: none;
line-height: 20px;
transition: 0.4s ease-in-out;
background: #FFF;
box-shadow: 0 2px 6px 0 rgba(15, 76, 100, 0.04), 0 1px 2px 0 rgba(15, 76, 100, 0.08), 0 0 0 1px rgba(15, 76, 100, 0.08);
}

.content-area .contact-form .form-submit button:hover{
background-color: var(--karabaglar-dark-color);
color:#fff;
transition: 0.4s ease-in-out;
}

.content-area .content-main .table-content{
border-radius: 10px;
background: #FFF;
box-shadow: 0 1px 2px 0 rgba(15, 76, 100, 0.08), 0 0 0 1px rgba(15, 76, 100, 0.08);
display: flex;
flex-direction: column;
align-items: center;
align-self: stretch;
}
.content-area .content-main .table-content .table-title {
display: flex
;
padding: var(--spacing-2xl, 35px) var(--spacing-3xl, 24px) 35px var(--spacing-3xl, 24px);
align-items: flex-start;
gap: var(--spacing-xl, 16px);
align-self: stretch;
}
.content-area .content-main .table-content .table-title h4{
color: var(--Karabalar-Brand, #043B58);
font-size: 18px;
gap: 8px;
font-style: normal;
font-weight: 600;
line-height: 28px; /* 155.556% */
display: flex;
margin-bottom:0;
}

.content-area .content-main .table-content .table-title span{
display: flex;
padding: var(--spacing-xxs, 2px) var(--spacing-md, 8px);
align-items: center;
border-radius: var(--radius-full, 9999px);
border: 1px solid var(--Text-Text-Stoke-50, #E7EDF0);
background: #F9FAFB;
color: var(--Text-Text-Regular-600, #0E455B);
text-align: center;
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 18px; /* 150% */
}
.content-area .content-main .table-content .table-wrapper{
display: flex;
align-items: flex-start;
align-self: stretch;
}

.content-area .content-main .table-content .table-wrapper table{
width:100%;
}
.content-area .content-main .table-content .table-wrapper table thead tr th{
height: 44px;
padding: 12px 24px;
align-items: center;
gap: var(--spacing-lg, 12px);
align-self: stretch;
border-bottom: 1px solid var(--Text-Text-Stoke-50, #E7EDF0);
border-top: 1px solid var(--Text-Text-Stoke-50, #E7EDF0);
background: #FFF;
color: var(--Text-Text-Medium-700, #0B3647);
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: 18px; /* 150% */
}

.content-area .content-main .table-content .table-wrapper table tbody tr:nth-child(even){
background: #F9FAFB;
}

.content-area .content-main .table-content .table-wrapper table tbody tr:nth-child(odd){
background: #fff;
}


.content-area .content-main .table-content .table-wrapper table tbody tr td{
height: 72px;
padding: var(--spacing-xl, 16px) var(--spacing-3xl, 24px);
align-items: center;
align-self: stretch;
border-bottom: 1px solid var(--Text-Text-Stoke-50, #E7EDF0);

color: var(--Text-Text-Regular-600, #0E455B);
font-family: Montserrat;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 142.857% */
}
.content-area .content-main .calendar-area .event-item p{

font-size: 12px !important;
color: #fff !important;
line-height: 16px !important;
}
.content-area .content-main .calendar-area .event-item {
border-radius: 6px;
padding: 2px 6px;
font-size: 12px ;
color: #000;
margin-bottom: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
}
.content-area .content-main .calendar-area .event-item::before{
content: "";
/*width: 3px;*/
height: 8px;
border-radius: 9999px;
background: #83C8FF;
position: absolute;
left: 5%;
top: 30%;
}
.content-area .content-main .calendar-area .event-item.tiyatro { background: #ffe999; }
.content-area .content-main .calendar-area .event-item.cocuk { background: #c7f1d6; }
.content-area .content-main .calendar-area .event-item.festival { background: #d1e7ff; }
.content-area .content-main .calendar-area .event-item.sinema { background: #f0ccf4; }
.content-area .content-main .calendar-area .event-item.spor { background: #e5e5e5; }

.content-area .content-main .calendar-area .disabled {
background-image: repeating-linear-gradient(
45deg,
#fbdede,
#f7f7f7 4px,
#fff 4px,
#fff 8px
);
}

.content-area .content-main .calendar-area{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
align-self: stretch;
}

.content-area .content-main .calendar-area .calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
align-self: stretch;
}

.content-area .content-main .calendar-area .calendar-header h2{
color: var(--Text-Text-Medium-700, #0B3647);
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin-bottom: 0;
}

.content-area .content-main .calendar-area .calendar-header .calendar-nav{
display: flex;
align-items: center;
gap: 12px;
align-self: stretch;
}
.content-area .content-main .calendar-area .calendar-header .calendar-nav .calendar-today{
display: flex;
padding: 6px 14px;
justify-content: center;
align-items: center;
gap: 4px;
align-self: stretch;
border-radius: 8px;
background: #FFF;
box-shadow: 0 2px 6px 0 rgba(15, 76, 100, 0.04), 0 1px 2px 0 rgba(15, 76, 100, 0.08), 0 0 0 1px rgba(15, 76, 100, 0.08);
}
.content-area .content-main .calendar-area .calendar-header .calendar-nav button{
border: none;
}
.content-area .content-main .calendar-area .calendar-header .calendar-nav .calendar-nav-btn{
background: transparent;
}

.content-area .content-main .calendar-area .event-filter{display: flex;padding: 12px 0;align-items: center;gap:
24px;align-self: stretch;}

.content-area .content-main .calendar-area .event-filter p{
color: var(--Text-Text-Medium-700, #0B3647);
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 125% */
margin-bottom:0;
}

.content-area .content-main .calendar-area .event-filter .event-checkbox-group{
display: flex;
align-items: center;
gap: 16px;
padding-left: 24px;
border-left: 1px solid #ddd;
}

.content-area .content-main .calendar-area .event-filter .event-checkbox-group .event-checkbox{
display: flex;
align-items: center;
gap: var(--spacing-md, 4px);
color: var(--Text-Text-Medium-700, #0B3647);
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 142.857% */
}

.content-area .content-main .calendar-area .event-filter .event-checkbox-group .event-checkbox input{
display: none;
}
.event-checkbox .checkmark {
width: 20px;
height: 20px;
border-radius: 6px;
display: inline-block;
background-color: #e0e0e0;
position: relative;
}

.event-checkbox input:checked + .checkmark::after {
content: '✔';
color: #fff;
font-size: 13px;
position: absolute;
top: 1px;
left: 5px;
}

.event-checkbox.tiyatro input:checked + .checkmark {
background-color: #F6BE3B;
}
.event-checkbox.cocuk input:checked + .checkmark {
background-color: #51CC86;
}
.event-checkbox.festival input:checked + .checkmark {
background-color: #3B82F6;
}
.event-checkbox.sinema input:checked + .checkmark {
background-color: #B53BF6;
}
.event-checkbox.spor input:checked + .checkmark {
background-color: #FBEBEB;
}
.content-area .content-main .calendar-area .calendar-table-wrapper{
width: 100%;
border-radius: 10px;
border: 1px solid var(--Text-Text-Stoke-50, #E7EDF0);
overflow: hidden;
}
.content-area .content-main .calendar-area .calendar-table-wrapper table{
width: 100%;
}
.content-area .content-main .calendar-area .calendar-table-wrapper table thead {
width: 100%;
color: var(--Text-Text-Regular-600, #0E455B);
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px;
}


.content-area .content-main .calendar-area .calendar-table-wrapper table thead th {
padding: 8px 0px;
}
.content-area .content-main .calendar-area .calendar-table-wrapper table thead th {
border: 1px solid var(--Text-Text-Stoke-50, #E7EDF0);
}
.content-area .content-main .calendar-area .calendar-table-wrapper table tbody td {
padding: var(--spacing-xs, 4px) 8px 8px 8px;
height: 150px;
border-right: 1px solid var(--Text-Text-Stoke-50, #E7EDF0);
border-bottom: 1px solid var(--Text-Text-Stoke-50, #E7EDF0);
border-left: 1px solid var(--Text-Text-Stoke-50, #E7EDF0);
max-width: 100px;
width: 100px;
align-content: start;
}
.content-area .content-main .calendar-area .calendar-table-wrapper table tbody td p{
margin-bottom:0;
}
.content-area .content-main .calendar-area .calendar-table-wrapper table tbody td span{
color: var(--Text-Text-Medium-700, #0B3647);
text-align: center;
font-family: Montserrat;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 142.857% */
}

.content-area .content-main .calendar-area .calendar-table-wrapper table tbody td .event-item{
display: flex;
/*padding: 2px 6px 2px 12px;*/
padding: 3px;
flex-direction: column;
align-items: flex-start;
gap: 8px;
align-self: stretch;
border-radius: 6px;
border: 1px solid #B5DCFF;
background: #EDF7FF;
backdrop-filter: blur(12px);       
}
.content-area .content-main .calendar-area .calendar-table-wrapper table tbody td .event-item * {
    display: inline-block !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.content-area .content-main .calendar-area .calendar-table-wrapper table tbody td .event-item:hover *{
    overflow: visible !important;
    white-space: normal !important;
    height: auto !important;
    position: relative;
    z-index: 10;
}

.content-area .content-main .calendar-area .calendar-table-wrapper table tbody tr:nth-child(even){
background: #fff;
}

.content-area .content-main .calendar-area .calendar-table-wrapper table tbody tr:nth-child(odd){
background: #F9FAFB;
}


.event-item.festival{
color: #034DFF !important;
border: 1px solid #B5DCFF !important;
background: #EDF7FF !important;
}
.event-item.tiyatro{
color: #8A6C00 !important;
border: 1px solid #FFE998 !important;
background: #FFF7E2 !important;
}
.event-item.cocuk{
color: #059669 !important;
border: 1px solid #A7F3D0 !important;
background: #ECFDF5 !important;
}
.event-item.sinema{
color: #7E22CE !important;
border: 1px solid #E9D5FF !important;
background: #FAF5FF !important;
}

.content-area .content-main .calendar-area .event-item.festival::before{
background: #83C8FF;
}

.content-area .content-main .calendar-area .event-item.tiyatro::before{
background: #FFE483;
}

.content-area .content-main .calendar-area .event-item.cocuk::before{
background: #6EE7B7;
}

.content-area .content-main .calendar-area .event-item.sinema::before{
background: #D883FF;
}

.custom-modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
z-index: 1000;
display: none;
justify-content: center;
align-items: center;
}

.custom-modal.open {
display: flex;
}

.modal-card {
display: flex;
flex-direction: row;
max-width: 720px;
width: 100%;
position: relative;
overflow: hidden;
border-radius: 16px;
background: linear-gradient(180deg, #FFF 0%, #FFF 100%);
box-shadow: 0 -2px 0.5px 0 rgba(15, 76, 100, 0.04) inset, 0 -3px 3px 0 rgba(15, 76, 100, 0.04) inset, 0 0 0 1px rgba(15,
76, 100, 0.04), 0 1px 2px 0 rgba(15, 76, 100, 0.08), 0 6px 16px 0 rgba(15, 76, 100, 0.04);
backdrop-filter: blur(2px);
display: flex;
padding: 16px;
gap: var(--spacing-4xl, 32px);
flex: 1 0 0;
}

.modal-left {
width: 50%;
position: relative;
}

.modal-image-wrapper {
height: 100%;
background-size: cover;
background-position: center;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 16px;
color: #fff;
border-radius: 16px;
}

.map-link {
padding: 6px 10px;
border-radius: 8px;
display: inline-flex;
align-items: center;
gap: 4px;
text-decoration: none;
width: fit-content;
color: #FFF !important;
font-family: Montserrat;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}

.countdown {
/*margin-top: auto;*/
display: flex;
padding: 0 15.776px;
justify-content: center;
align-items: center;
gap: 6.573px;
align-self: stretch;
}

.countdown div {
padding: 6px;
border-radius: 8px;
text-align: center;
width: 52px;
}

.countdown span {
font-weight: bold;
font-size: 16px;
display: block;
}

.countdown p {
font-size: 12px;
margin: 0;
}

.modal-right {
width: 50%;
padding: 24px;
justify-content: center;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
flex: 1 0 0;
align-self: stretch;
}

.modal-right .badge {
display: inline-block;
font-size: 12px;
color: #7E22CE;
font-weight: 500;
padding: 4px 10px;
border-radius: var(--radius-sm, 6px);
border: 1px solid #E9D5FF;
background: #FAF5FF;

/* Shadows/drop-shadow-xs */
box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.03);
}

.modal-right h3 {color: var(--Text-Text-Strong-800, #082A37);font-family: Montserrat;font-size: 24px;font-style:
normal;font-weight: 600;margin-bottom: 0;line-height: normal;}

.modal-right .event-date {
color: #90A3B1;
font-size: 14px;
margin-bottom: 0;
overflow: hidden;
color: var(--Text-Text-Light-300, #5E8797);
text-overflow: ellipsis;
font-family: Montserrat;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 11.09px; /* 79.215% */
letter-spacing: -0.28px;
}

.modal-right .event-desc {
font-size: 14px;
margin-bottom: 0;
overflow: hidden;
color: var(--Text-Text-Medium-700, #0B3647);
font-family: Montserrat;
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: 18px; /* 138.462% */
letter-spacing: 0.13px;
}

.modal-btn {border-radius: 8px;background: #FFF;box-shadow: 0 2px 6px 0 rgba(15, 76, 100, 0.04), 0 1px 2px 0 rgba(15,
76, 100, 0.08), 0 0 0 1px rgba(15, 76, 100, 0.08);display: flex;padding: 6px 14px;justify-content: center;align-items:
center;color: var(--Karabalar-Brand, #043B58);font-family: Montserrat;font-size: 14px;font-style: normal;font-weight:
600;line-height: 20px; /* 142.857% */gap: 4px;align-self: stretch;}

.modal-btn:hover {
background: #f2f2f2;
}

.close-modal {
position: absolute;
top: 12px;
right: 12px;
background: none;
border: none;
font-size: 22px;
color: #333;
cursor: pointer;
}

.content-area .content-main .event-detail-wrapper{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 48px;
flex: 1 0 0;
}
.content-area .content-main .event-detail-wrapper .event-detail-card{
/* display: flex; */
padding: 16px 16px 24px 16px;
flex-direction: column;
align-items: flex-start;
gap: 24px;
align-self: stretch;
border-radius: 16px;
background: linear-gradient(180deg, #FFF 0%, #FFF 100%);
box-shadow: 0 -2px 0.5px 0 rgba(15, 76, 100, 0.04) inset, 0 -3px 3px 0 rgba(15, 76, 100, 0.04) inset, 0 0 0 1px rgba(15,
76, 100, 0.04), 0 1px 2px 0 rgba(15, 76, 100, 0.08), 0 6px 16px 0 rgba(15, 76, 100, 0.04);
backdrop-filter: blur(2px);
}
.content-area .content-main .event-detail-wrapper .event-image-box{
height: 240px;
background-size: cover;
background-position: center;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 16px;
color: #fff;
border-radius: 16px;
}
.content-area .content-main .event-detail-wrapper .event-text .badge{
display: inline-block;
font-size: 12px;
color: #7E22CE;
font-weight: 500;
padding: 4px 10px;
border-radius: var(--radius-sm, 6px);
border: 1px solid #E9D5FF;
background: #FAF5FF;
box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.03);
}
.content-area .content-main .event-detail-wrapper .event-text h3{
color: var(--Text-Text-Strong-800, #082A37);
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin-bottom:0;
}
.content-area .content-main .event-detail-wrapper .event-text p{
color: var(--Text-Text-Medium-700, #0B3647);
font-size: 13px;
font-style: normal;
font-weight: 500;
line-height: 18px;
letter-spacing: 0.13px;
margin-bottom:0;
}

.content-area .content-main .event-detail-wrapper .event-text{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
justify-content: center;
flex: 1 0 0;
align-self: stretch;
height: 100%;
}
.content-area .content-main .event-detail-wrapper .event-text.hizmet-text p{
color: var(--Text-Text-Medium-700, #0B3647);

font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 32px; /* 177.778% */
letter-spacing: 0.18px;
}
.content-area .content-main .event-detail-wrapper .event-text.hizmet-text{

justify-content: space-between;

}
.content-area .content-main .event-detail-wrapper .event-text.hizmet-text .hizmet-text-top{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
flex: 1 0 0;
align-self: stretch;
}
.content-area .content-main .event-info .info-box{
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
flex: 1 0 0;
align-self: stretch;
}
.content-area .content-main .event-info p{
margin-bottom:0;
color: var(--Text-Text-Medium-700, #0B3647);
text-align: center;
font-family: Montserrat;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 20px;
}
.content-area .content-main .event-info span{
color: var(--Text-Text-Medium-700, #0B3647);
text-align: center;
font-family: Montserrat;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 125% */
}
.content-area .content-main .event-info {
width: 100%;
padding-top: 24px;
border-top:1px solid #E7EDF0;
}
.karabaglar-btn{
display: flex;
padding: 8px 14px;
justify-content: center;
align-items: center;
gap: 4px;
align-self: stretch;
border-radius: 8px;
background: #FFF;
box-shadow: 0 2px 6px 0 rgba(15, 76, 100, 0.04), 0 1px 2px 0 rgba(15, 76, 100, 0.08), 0 0 0 1px rgba(15, 76, 100, 0.08);
}

a.btn.karabaglar-btn i {
transform: rotate(315deg);
}

.right-menu-content strong{
    color: var(--Text-Text-Strong-800, #082A37);
    font-family: Montserrat !important;
    font-style: normal;
    line-height: normal;
}
.content-area .content-main .right-menu-content h2, .content-area .content-main .right-menu-content h2 strong{
color: var(--Text-Text-Strong-800, #082A37);
font-family: Montserrat;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.content-area .content-main .right-menu-content p{
color: var(--Text-Text-Medium-700, #0B3647);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 28px;
letter-spacing: -0.18px;
text-align:justify;

}
.content-area .content-main .right-menu-content h3{
color: var(--Text-Text-Strong-800, #082A37);
font-size: 22px;
font-style: normal;
font-weight: 500;
line-height: normal;
}

.content-area .content-main .right-menu-content h4{
color: var(--Text-Text-Strong-800, #082A37);
font-family: Montserrat;
font-size: 22px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.content-area .content-main .right-menu-content ul li{
color: var(--Text-Text-Medium-700, #0B3647);
font-family: Montserrat;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 30px; /* 188.889% */
letter-spacing: -0.18px;
}


.content-area .content-main .accordion-item {
border-bottom: 1px solid #e0e0e0;
background-color: #fff;
padding: 10px;
justify-content: space-between;
align-items: center;
align-self: stretch;
border-radius: 10px;
background: #FFF;
box-shadow: 0 1px 2px 0 rgba(15, 76, 100, 0.08), 0 0 0 1px rgba(15, 76, 100, 0.08);
}


.content-area .content-main .accordion-header {
width: 100%;
background-color: #fff;
border: none;
outline: none;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
}

.content-area .content-main .accordion-title {
display: flex;
align-items: center;
gap: 12px;
}

.content-area .content-main .accordion-title img {
object-fit: cover;
width: 32px;
height: 40px;
transform: rotate(-11.781deg);
border-radius: 8px;
border: 1.5px solid #FFF;
box-shadow: 0 10px 3px 0 rgba(0, 0, 0, 0.00), 0 6px 3px 0 rgba(0, 0, 0, 0.01), 0 4px 2px 0 rgba(0, 0, 0, 0.05), 0 2px
2px 0 rgba(0, 0, 0, 0.09), 0 0 1px 0 rgba(0, 0, 0, 0.10);
}

.content-area .content-main .accordion-title span {
font-weight: 600;
color: #002b40;
font-size: 16px;
}

.content-area .content-main .accordion-icon img {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
}

.content-area .content-main .accordion-item.active .accordion-icon img {
transform: rotate(180deg);
}

.content-area .content-main .accordion-body {
display: none;
padding: 20px 10px;

}

.content-area .content-main .accordion-item.active .accordion-body {
display: block;
}

.content-area .content-main .gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}

.content-area .content-main .gallery-item img {
height: 260.577px;
flex: 1 0 0;
aspect-ratio: 271.00/260.58;
border-radius: 6px;
object-fit: cover;
}


.content-area .content-main .accordion-area {
width: 100%;
display: flex;
padding: 16px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
align-self: stretch;
border-radius: 16px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.70) 0%, #FFF 100%);
box-shadow: 0 -2px 0.5px 0 rgba(15, 76, 100, 0.04) inset, 0 -3px 3px 0 rgba(15, 76, 100, 0.04) inset, 0 0 0 1px rgba(15,
76, 100, 0.04), 0 1px 2px 0 rgba(15, 76, 100, 0.08), 0 6px 16px 0 rgba(15, 76, 100, 0.04);
backdrop-filter: blur(2px);
}
.content-area .content-main .accordion-area .accordion-wrapper {
width: 100%;
display: flex;
flex-direction: column;
gap: 16px;
}

.content-area .content-main .accordion-title img:nth-child(even){
transform: rotate(5deg);
left: -15px;
position: relative;
}

.content-area .content-main .facility-card{
display: flex;
padding: 10px;
align-items: center;
gap: 16px;
align-self: stretch;
border-radius: 10px;
background: #FFF;
box-shadow: 0 1px 2px 0 rgba(15, 76, 100, 0.08), 0 0 0 1px rgba(15, 76, 100, 0.08);
}
.content-area .content-main .facility-card .facility-img{
width: 205px;
align-self: stretch;
border-radius: 6px;
}
.content-area .content-main .facility-card .facility-img img{
border-radius: 6px;
width: 100%;
height: 100%;
object-fit: cover;
}

.content-area .content-main .facility-card .facility-text{
display: flex;
padding: 12px 0;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 20px;
flex: 1 0 0;
}

.content-area .content-main .facility-card .facility-text p{
margin-bottom:0;
color: var(--Text-Text-Medium-700, #0B3647);
font-family: Montserrat;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 20px;
}

.content-area .content-main .facility-card .facility-text p strong{
color: var(--Text-Text-Regular-600, #0E455B);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 125% */
}

.content-area .sidebar .news-sidebar-list{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
flex-shrink: 0;
align-self: stretch;
}

.content-area .sidebar .news-sidebar-list .news-title-area .title-text h3{
color: var(--Text-Text-Strong-800, #082A37);
font-family: Montserrat;
font-size: 14px;
margin-bottom:0;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 142.857% */
}
.content-area .sidebar .news-sidebar-list .haber-col {
display: flex;
padding: var(--spacing-md, 8px) var(--spacing-lg, 12px);
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: var(--spacing-md, 8px);
flex-shrink: 0;
align-self: stretch;
}
.content-area .sidebar .news-sidebar-list .haber-col h4{
color: var(--Text-Text-Strong-800, #082A37);
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 142.857% */
}
.content-area .sidebar .news-sidebar-list .haber-col .haber-item{
display: flex;
width: 100%;
height: min-content;
padding: var(--spacing-md, 8px) 0;
align-items: center;
gap: var(--spacing-md, 8px);
flex-shrink: 0;
}
.content-area .sidebar .news-sidebar-list .haber-col .haber-item img{
width: 56px;
height: 56px;
flex-shrink: 0;
object-fit: cover;
border-radius: 10px;;
}
.content-area .sidebar .news-sidebar-list .haber-col .haber-item p{
color: var(--Text-Text-Light-300, #5E8797);
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 21px;
letter-spacing: -0.14px;
margin-bottom:0;
}

.content-area .haber-meta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-lg, 12px);
align-self: stretch;
margin-bottom:18px;
}
.content-area .haber-meta .meta-list{
display: flex;
gap: 8px;
}
.content-area .haber-meta .meta-list p{
color: var(--Text-Text-Regular-600, #0E455B);
font-family: Montserrat;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px;
margin-bottom: 0;
}

.content-area .content-main .right-menu-content .haber-img img{
border-radius: 8px;
margin-bottom: 20px;
width: 100%;
}

.content-area .content-main .muhtarlik-area .muhtar-menu{
border-radius: 10px;
background: #FFF;
box-shadow: 0 1px 2px 0 rgba(15, 76, 100, 0.08), 0 0 0 1px rgba(15, 76, 100, 0.08);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
padding: 16px 10px 16px 10px;
height: 650px;
overflow-y: scroll;
}
.content-area .content-main .muhtarlik-area .muhtar-menu h3{
color: var(--Text-Text-Strong-800, #082A37);
font-family: Montserrat;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: normal;
margin-bottom:0;
}
.content-area .content-main .muhtarlik-area .muhtar-menu .muhtar-list{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}
.content-area .content-main .muhtarlik-area .muhtar-menu .muhtar-list button{
display: flex;
height: 56px;
border: none;
justify-content: center;
align-items: center;
gap: 20px;
flex-shrink: 0;
align-self: stretch;
border-radius: 8px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.70) 0%, #FFF 100%);
box-shadow: 0 -2px 0.5px 0 rgba(15, 76, 100, 0.04) inset, 0 -3px 3px 0 rgba(15, 76, 100, 0.04) inset, 0 0 0 1px rgba(15,
76, 100, 0.04), 0 1px 2px 0 rgba(15, 76, 100, 0.08), 0 6px 16px 0 rgba(15, 76, 100, 0.04);
backdrop-filter: blur(2px);
color: var(--Karabalar-Brand, #043B58);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px;
transition: 0.4s;
}
.content-area .content-main .muhtarlik-area .muhtar-menu .muhtar-list button.active{
background: linear-gradient(180deg, rgba(15, 76, 100, 0.90) 0%, #0F4C64 100%);
box-shadow: 0 -2px 0.5px 0 rgba(4, 26, 34, 0.12) inset, 0 -3px 3px 0 rgba(3, 22, 29, 0.08) inset, 0 0 0 1px #0F4C64, 0
1px 2px 0 rgba(0, 41, 63, 0.08), 0 6px 16px 0 rgba(0, 41, 63, 0.04);
backdrop-filter: blur(2px);
color: #FFF;
}
.content-area .content-main .muhtarlik-area .muhtar-menu .muhtar-list button:hover{
transition: 0.4s;
background: linear-gradient(180deg, rgba(15, 76, 100, 0.90) 0%, #0F4C64 100%);
box-shadow: 0 -2px 0.5px 0 rgba(4, 26, 34, 0.12) inset, 0 -3px 3px 0 rgba(3, 22, 29, 0.08) inset, 0 0 0 1px #0F4C64, 0
1px 2px 0 rgba(0, 41, 63, 0.08), 0 6px 16px 0 rgba(0, 41, 63, 0.04);
color: #fff;
}

.content-area .content-main .muhtarlik-area{
width: 100%;
}
.content-area .content-main .muhtarlik-area .muhtar-content{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
flex: 1 0 0;
}
.content-area .content-main .muhtarlik-area .muhtar-content .muhtar-card{
border-radius: 10px;
background: #FFF;
box-shadow: 0 1px 2px 0 rgba(15, 76, 100, 0.08), 0 0 0 1px rgba(15, 76, 100, 0.08);
display: flex;
padding: 10px;
align-items: center;
gap: 16px;
align-self: stretch;
}
.content-area .content-main .muhtarlik-area .muhtar-content .muhtar-card img{
border-radius: 8px;
width: 205px;
align-self: stretch;
object-fit: cover;
height: 100%;
}
.content-area .content-main .muhtarlik-area .muhtar-content .muhtar-card .info-text{
display: flex;
padding: 12px 0 0 20px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 20px;
flex: 1 0 0;
}
.content-area .content-main .muhtarlik-area .muhtar-content .muhtar-card .info-text h4{
color: var(--Text-Text-Regular-600, #0E455B);
font-family: Montserrat;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 125% */
}
.content-area .content-main .muhtarlik-area .muhtar-content .muhtar-box{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
flex: 1 0 0;
}
.content-area .content-main .muhtarlik-area .muhtar-content .muhtar-box .info-text p{
color: var(--Text-Text-Medium-700, #0B3647);
font-family: Montserrat;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 125% */
margin-bottom: 0;
}
.content-area .content-main .muhtarlik-area .muhtar-content .muhtar-box .info-text p strong{
font-weight: 500;
}
.content-area .content-main .muhtarlik-area .muhtar-content .muhtar-box .muhtar-map{
border-radius: 10px;
background: #FFF;
box-shadow: 0 1px 2px 0 rgba(15, 76, 100, 0.08), 0 0 0 1px rgba(15, 76, 100, 0.08);
display: flex;
height: 320px;
padding: 10px;
align-items: center;
gap: 16px;
align-self: stretch;
}
.content-area .content-main .muhtarlik-area .muhtar-content .muhtar-box .muhtar-map iframe{
border-radius: 8px;
}

.content-area .org-chart-area{
display: flex;
flex-direction: column;
}

.content-area .org-chart-area .org-head{
display: flex;
height: 198px;
padding: 16px;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
gap: var(--spacing-4xl, 32px);
border-radius: 16px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.70) 0%, #FFF 100%);
box-shadow: 0 -2px 0.5px 0 rgba(15, 76, 100, 0.04) inset, 0 -3px 3px 0 rgba(15, 76, 100, 0.04) inset, 0 0 0 1px rgba(15,
76, 100, 0.04), 0 1px 2px 0 rgba(15, 76, 100, 0.08), 0 6px 16px 0 rgba(15, 76, 100, 0.04);
backdrop-filter: blur(2px);
}

.content-area .org-chart-area .org-head img{
width: 96px;
height: 96px;
flex-shrink: 0;
border-radius: 96px;
position: absolute;
z-index: 1;
top: 10px;
}
.content-area .org-chart-area .org-head .head-text-box{
display: flex;
width: 100%;
position: relative;
padding: 42px 16px 16px 16px;
flex-direction: column;
justify-content: center;
align-items: center;
flex-shrink: 0;
margin-top: 55px;
border-radius: 10px;
text-align: center;
background: #FFF;
box-shadow: 0 1px 2px 0 rgba(15, 76, 100, 0.08), 0 0 0 1px rgba(15, 76, 100, 0.08);
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.content-area .org-chart-area .org-head .head-text-box::after{
content:"";
width: 100%;
height: 20px;
background: var(--Karabalar-Brand, #043B58);
position: absolute;
bottom: -4px;
left: 0;
border-radius: 0px 0px 10px 10px;
z-index: -1;
}
.content-area .org-chart-area .org-head .head-text-box h4{
color: var(--Color-Header, #061027);
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 20px;
margin-bottom:0;
}
.content-area .org-chart-area .org-head .head-text-box p{
color: var(--Color-Body, #404040);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 125% */
margin-bottom:0;
}
.content-area .org-chart-area .org-column{
display: flex;
padding: 16px;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-4xl, 32px);
flex: 1 0 0;
border-radius: 16px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.70) 0%, #FFF 100%);
box-shadow: 0 -2px 0.5px 0 rgba(15, 76, 100, 0.04) inset, 0 -3px 3px 0 rgba(15, 76, 100, 0.04) inset, 0 0 0 1px rgba(15,
76, 100, 0.04), 0 1px 2px 0 rgba(15, 76, 100, 0.08), 0 6px 16px 0 rgba(15, 76, 100, 0.04);
backdrop-filter: blur(2px);
}
.content-area .org-chart-area .org-column .org-leader{
display: flex;
width: 100%;
position: relative;
padding: 16px 4px 16px 4px;
flex-direction: column;
justify-content: center;
align-items: center;
flex-shrink: 0;
margin-top: 30px;
border-radius: 10px;
text-align: center;
background: #FFF;
box-shadow: 0 1px 2px 0 rgba(15, 76, 100, 0.08), 0 0 0 1px rgba(15, 76, 100, 0.08);
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}

.content-area .org-chart-area .org-column .org-leader::after{
content:"";
width: 100%;
height: 20px;
background: var(--Karabalar-Brand, #043B58);
position: absolute;
bottom: -4px;
left: 0;
border-radius: 0px 0px 10px 10px;
z-index: -1;
}

.content-area .org-chart-area .org-column .org-leader .org-tag{
top: -15%;
z-index: 1;
background: #F2F4F7;
position: absolute;
width: 60px;
height: 60px;
justify-content: center;
align-items: center;
display: flex;
flex-shrink: 0;
border-radius: 11537.307px;
border: 1.125px solid rgba(0, 0, 0, 0.08);
color: var(--Text-Text-Light-300, #5E8797);
text-align: center;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 36px; /* 150% */
}
.content-area .org-chart-area .org-column .org-leader p{
color: var(--Color-Body, #404040);
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px;
margin-bottom:0;
}
.content-area .org-chart-area .org-column .org-leader p strong{
font-weight: 500;
}

.content-area .org-chart-area .org-column .org-list{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
padding-left:0;
list-style: none;
}

.content-area .org-chart-area .org-column .org-list li{
display: flex;
height: 92px;
padding: 0 16px;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: stretch;
border-radius: 10px;
background: #FFF;
box-shadow: 0 0 0 1px rgba(15, 76, 100, 0.08);
color: var(--Color-Header, #061027);
text-align: center;
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 153.846% */
transition: 0.4s ease-in-out;
}
.content-area .org-chart-area .org-column .org-list li:hover{
background-color: #043B58;
color:#fff;
transition: 0.4s ease-in-out;
cursor: pointer;
}


.dropdown-li:hover .dropdown-menu {
display: block !important;
padding: 0px;
}

.dropdown-menu li {
/* padding: 5px; */
border-bottom: 1px solid #fff;
}

.dropdown-item {
padding: 10px;
border-left: 5px solid #0f4c64;
padding-left: 5px;
}

.dropdown-menu li:hover {
border-bottom: 1px solid #0f4c64 !important;
}
header.sub-header-area nav .nav-link::after {
color:var(--karabaglar-main-color);
}
header.header-area.sub-header-area .nav-link {
color:var(--karabaglar-main-color);
}
header.sub-header-area nav .nav-link:hover{
color:var(--karabaglar-main-color);
}

.muhtar-map iframe {
width: 100%;
height: 300px;
}
.dropdown-menu {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.70) 0%, #FFF 100%);
box-shadow: 0 -2px 0.5px 0 rgba(15, 76, 100, 0.04) inset, 0 -3px 3px 0 rgba(15, 76, 100, 0.04) inset, 0 0 0 1px rgba(15,
76, 100, 0.04), 0 1px 2px 0 rgba(15, 76, 100, 0.08), 0 6px 16px 0 rgba(15, 76, 100, 0.04);
backdrop-filter: blur(2px);
overflow: hidden;
}
.right-menu-content iframe {
width: 100%;
height: 700px;
}
.content-main iframe {
width: 100% !important;
}
.muhtar-map iframe {
width: 100% !important;
}

.muhtar-map {
width: 100%;
float: left;
display: block !important;
}
#lightgallery img {
width: 100%;
height: 250px;
object-fit: contain;
object-position: center;
}
tbody#lightgallery img {
height: auto;
width: 100%;
}
.news-desc {
display: -webkit-box !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden !important;
text-overflow: ellipsis;
white-space: normal !important;
line-height: 1.5;
max-height: calc(1em* 3);
overflow-wrap: anywhere;
}
.content-area .content-main .report-list .report-item.encumen-item {
flex-direction: column;
justify-content: start;
align-items: start;
gap: 16px;
}
.report-bottom {
display: flex;
flex-direction: column;
gap: 8px;
}

.report-bottom a.download-icon {
display: flex;
padding: 12px 16px;
justify-content: center;
align-items: center;
gap: 6px;
flex: 1 0 0;
color: #FFF;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
border-radius: 4px;
border: 1px solid #FFF;
background: rgb(3 59 88);
transition: 0.4sease-in-out;
width: 150px;
}
.report-bottom a.download-icon img{
filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(223deg) brightness(102%)
contrast(101%);
}

.content-area .content-main .card-tabs .card-img-item .img-content.iframe-content-youtube iframe {
width: 100%;
height: 250px;
border-radius: 10px;
overflow: hidden;
}

.content-area .content-main .card-tabs .card-img-item .img-content.iframe-content-youtube p {
width: 100%;
height: 250px;
margin-bottom: 0;
}

@media screen and (min-width: 1500px) {
main .content .container {
max-width: 1550px;
margin-right: auto !important;
}
section .event-banner{
margin-top: 150px !important;
}
header .container{
max-width: 1550px !important;
}
footer .container{
max-width: 1700px !important;
}
.sub-banner-area::after {

background-position-x: -52%;

}
.owl-dots {

right: 5%;

}
.owl-nav {
right: 7%;
}
}

footer .container{
max-width: 1400px;
}
header .container{
max-width: 1285px;
}

.content-area .org-chart-area .org-column .org-list li:hover a{
color:#fff;
}

.content-area .org-chart-area .org-column .org-list li a{
color: var(--Color-Header, #061027);
}
.news-dvm-btn a {
text-decoration: underline;
color: var(--Brand-Neutral-neutral-700, #A8ADB2);
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 130%;
}
.news-area .news-title-area {
width: 100%;
border-bottom: 1px solid #EBEBEB;
display: flex;
align-items: center;
justify-content: space-between;
}

.news-gallery.img-content{
min-height: 200px;
}
.report-pane img {
max-width: 100%;
}
.report-pane.active li {
color: var(--Text-Text-Medium-700, #0B3647);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 28px;
letter-spacing: -0.18px;
}
.content-area .org-chart-area .org-column .org-leader {
height: 75px;
}

main .right-menu .right-list ul.submenu.two-rows {
flex-wrap: wrap;
width: 1100px;
}

main .right-menu .right-list ul.submenu.two-rows li {
flex: 0 0 calc(100% / 9);
text-align: center;
list-style: none;
padding: 10px;
}
.list-web {
background-color: #fff;
border-radius: 10px;
padding: 15px;
}

.list-web img {
height: 28px !important;
display: inline-block;
vertical-align: middle;
}

.list-web a::after {
content: " ";
margin-left: 8px;
margin-right: 8px;
color: #0f4c64;
font-weight: bold;
border-right: 2px solid #0f4c65;
}
.table-form {
width: 100%;
border-collapse: collapse;
margin: 15px 0;
}

.table-form td {
padding: 12px 8px;
border-bottom: 1px solid #eee;
vertical-align: middle;
}

.table-form td:first-child {
color: #2c3e50;
font-size: 15px;
font-weight: 500;
}

.table-form td:last-child {
text-align: right;
}

.table-form a {
color: #e74c3c;
font-weight: 600;
text-decoration: none;
}

.table-form a:hover {
text-decoration: underline;
}
.yonetim-semasi-ozel-div {
width: 11.66% !important;
}

.yonetim-semasi-ozel-div .org-column {
padding: 6px !important;
}

.yonetim-semasi-ozel-div .org-list a {
font-size: 12px;
}
.calendar-filter {
width: 350px;
display: flex;
height: 50px;
text-align: right;
align-items: center;
justify-content: end;
}

.calendar-filter .news-dvm-btn {
margin-left: 10px;
}

ul.submenu.two-rows .menu-title {
min-height: 70px;
}
.org-leader.zero-child {
margin-top: 10px !important;
margin-bottom: 10px !important;
}
.sub-banner-content {
position: relative;
z-index: 100;
}
.countdown p {
color: #fff !important;
}
.activity_map iframe {
width: 100%;
height: 400px;
}
@media screen and (max-width: 991px) {
.web-sites a {
width: 100% !important;
float: left;
text-align: center;
border-top: 2px solid #104d65;
padding-top: 10px;
padding-bottom: 10px;
}
.fast-access-area .fast-access-item strong {
    font-size: 14px;
}
.web-sites a:nth-child(1) {
border-top: none !important;
}

.list-web a::after {
display: none;
}
.list-web {
display: block !important;
}
.list-web {
display: block !important;
}
.right-menu {
display: none !important;
}
.content {
width: 100% !important;
}
.owl-dots {
top: -36.7rem;
right: 24%;
width: 100%;
float: left;
display: block;
z-index: 999;
position: relative;
}


.owl-nav {
top: -50rem;
}

section.hero-area .hero-slider-wrapper .hero-static-content .hero-text h1 {
font-size: 25px;
line-height: 42px;
}

button.owl-prev {
height: 30px !important;
width: 30px !important;
}

button.owl-prev img {
width: 25px !important;
height: 25px !important;
}

button.owl-next {
height: 30px !important;
width: 30px !important;
}

a.logo img {
max-width: 72px;
height: 65px !important;
}

header.header-area {
width: 100%;
}

.hero-static-content {}

.hero-static-content {
padding-top: 140px !important;
}

.mayor-box {
margin-top: 20px;
}

section.hero-area .hero-slider-wrapper .hero-static-content .mayor-box .mayor-img {
border-radius: 20px;
}

section.hero-area .hero-slider-wrapper .hero-static-content .mayor-box .mayor-info h5 {
font-size: 16px;
}

section.hero-area .hero-slider-wrapper .hero-static-content .mayor-box .mayor-info p {
font-size: 13px;
}

section.hero-area .hero-slider-wrapper .hero-static-content .mayor-box .mayor-info .mayor-social {
font-size: 20px;
}

section.hero-area .hero-slider-wrapper .hero-static-content .mayor-box .mayor-info .mayor-buttons .btn {
font-size: 12px;
padding: 5px !important;
}

section.hero-area .hero-slider-wrapper .hero-static-content .mayor-box .mayor-info {
display: flex;
justify-content: center;
}

section.hero-area .hero-slider-wrapper .hero-static-content .mayor-box .mayor-img img {
}

section.hero-area .hero-slider-wrapper .hero-static-content .mayor-box .mayor-img {
max-height: 150px;
}
section .event-banner {
display: block !important;
}
.mySwiper .swiper-slide img{
width: 300px !important;
height: 300px !important;
}
/* .swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper{
    transform: translate3d(0px, 0, 0) !important;
    width: 100% !important;
} */
 .mySwiper {
    width: 100% !important;
}
}


table.custom-table th {
font-size: 14px !important;
font-weight: 800 !important;
}

table.custom-table td {
font-weight: 400 !important;
}
.content-area .content-main .calendar-area .event-filter .event-checkbox-group {
display: block;
width: 100%;
}

.content-area .content-main .calendar-area .event-filter .event-checkbox-group label {
width: 33% !important;
margin-bottom: 10px;
float: left;
}
.content-area .content-main .calendar-area .calendar-table-wrapper table tbody td .event-item.atolye-kurs {
    background-color: #a80000;
    color: #fff;
}
/* 1. Tiyatro (Yetişkin) - Elektrik Mavisi */
.event-checkbox.tiyatro-yetiskin .checkmark {
    background-color: #0052FF;
}

/* 2. Sergi / Edebiyat Etkinlikleri  */
.event-checkbox.sergi-edebiyat-etkinlikleri .checkmark {
    background-color: #11b7a1;
}

/* 3. Panel / Söyleşi / Anma - Neon Mor */
.event-checkbox.panel-soylesi-anma .checkmark {
    background-color: #9B5DE5;
}

/* 4. Tiyatro (Çocuk) - Patlayan Çiklet Pembesi */
.event-checkbox.tiyatro-cocuk .checkmark {
    background-color: #FF007F;
}

/* 5. Festival / Şenlikler / Konser - Gün Batımı Turuncusu */
.event-checkbox.festival-senlikler-konser .checkmark {
    background-color: #FF5400;
}

/* 6. Yarışma / Turnuva - Trafik Yeşil */
.event-checkbox.yarisma-turnuva .checkmark {
    background-color: #00E500;
}

/* 7. Atölye / Kurs - Kan Kırmızısı */
.event-checkbox.atolye-kurs .checkmark {
    background-color: #D60000;
}

/* 8. Fuar / Kortej - Gece Mavisi / Koyu Lacivert (Atölye Kırmızısından Tamamen Ayrışması İçin) */
.event-checkbox.fuar-kortej .checkmark {
    background-color: #03045E;
}

/* 9. Bağımsızlık Koşusu - Altın Sarısı / Amber */
.event-checkbox.bagimsizlik-kosusu .checkmark {
    background-color: #FFB703;
}

/* 10. Yarıyıl Tatili Etkinlikleri - Fosforlu Lime Yeşili */
.event-checkbox.yariyil-tatili-etkinlikleri .checkmark {
    background-color: #CCFF00;
}

/* 11. Eğitim - Metalik Koyu Antrasit (Renkliliğin İçinde Hemen Seçilir) */
.event-checkbox.egitim .checkmark {
    background-color: #3D405B;
}

/* 12. Meclis Toplantısı - Parlak Deniz Mavisi */
.event-checkbox.meclis-toplantisi .checkmark {
    background-color: #00B4D8;
}

/* 13. Başkan Mahallede - Neon Eflatun / Lila */
.event-checkbox.baskan-mahallede .checkmark {
    background-color: #F15BB5;
}

/* 14. Toplu İş Görüşmesi - Çikolata Kahvesi */
.event-checkbox.toplu-is-gorusmesi .checkmark {
    background-color: #6F4E37;
}
/* 15. Bale ve Modern Dans Gösterisi -  */
.event-checkbox.bale-ve-modern-dans-gosterisi .checkmark {
    background-color: #a30f6f;
}

/* gray */
/* 1. Tiyatro (Yetişkin) - Elektrik Mavisi */
.content-area .content-main .calendar-area .calendar-table-wrapper table tbody td .event-item.tiyatro-yetiskin {
    background-color: #0052FF;
    color: #fff;
}

/* 2. Sergi / Edebiyat Etkinlikleri - Parlak Camgöbeği */
.content-area .content-main .calendar-area .calendar-table-wrapper table tbody td .event-item.sergi-edebiyat-etkinlikleri {
    background-color: #11b7a1;
    color: #1e293b; /* Açık arka planda rahat okunsun diye koyu yazı */
}

/* 3. Panel / Söyleşi / Anma - Neon Mor */
.content-area .content-main .calendar-area .calendar-table-wrapper table tbody td .event-item.panel-soylesi-anma {
    background-color: #9B5DE5;
    color: #fff;
}

/* 4. Tiyatro (Çocuk) - Patlayan Çiklet Pembesi */
.content-area .content-main .calendar-area .calendar-table-wrapper table tbody td .event-item.tiyatro-cocuk {
    background-color: #FF007F;
    color: #fff;
}

/* 5. Festival / Şenlikler / Konser - Gün Batımı Turuncusu */
.content-area .content-main .calendar-area .calendar-table-wrapper table tbody td .event-item.festival-senlikler-konser {
    background-color: #FF5400;
    color: #fff;
}

/* 6. Yarışma / Turnuva - Trafik Yeşil */
.content-area .content-main .calendar-area .calendar-table-wrapper table tbody td .event-item.yarisma-turnuva {
    background-color: #00E500;
    color: #fff;
}

/* 7. Atölye / Kurs - Kan Kırmızısı */
.content-area .content-main .calendar-area .calendar-table-wrapper table tbody td .event-item.atolye-kurs {
    background-color: #D60000;
    color: #fff;
}

/* 8. Fuar / Kortej - Gece Mavisi / Koyu Lacivert */
.content-area .content-main .calendar-area .calendar-table-wrapper table tbody td .event-item.fuar-kortej {
    background-color: #03045E;
    color: #fff;
}

/* 9. Bağımsızlık Koşusu - Altın Sarısı / Amber */
.content-area .content-main .calendar-area .calendar-table-wrapper table tbody td .event-item.bagimsizlik-kosusu {
    background-color: #FFB703;
    color: #1e293b;
}

/* 10. Yarıyıl Tatili Etkinlikleri - Fosforlu Lime Yeşili */
.content-area .content-main .calendar-area .calendar-table-wrapper table tbody td .event-item.yariyil-tatili-etkinlikleri {
    background-color: #CCFF00;
    color: #1e293b; /* Açık arka planda rahat okunsun diye koyu yazı */
}

/* 11. Eğitim - Metalik Koyu Antrasit */
.content-area .content-main .calendar-area .calendar-table-wrapper table tbody td .event-item.egitim {
    background-color: #3D405B;
    color: #fff;
}

/* 12. Meclis Toplantısı - Parlak Deniz Mavisi */
.content-area .content-main .calendar-area .calendar-table-wrapper table tbody td .event-item.meclis-toplantisi {
    background-color: #00B4D8;
    color: #fff;
}

/* 13. Başkan Mahallede - Neon Eflatun / Lila */
.content-area .content-main .calendar-area .calendar-table-wrapper table tbody td .event-item.baskan-mahallede {
    background-color: #F15BB5;
    color: #fff;
}

/* 14. Toplu İş Görüşmesi - Çikolata Kahvesi */
.content-area .content-main .calendar-area .calendar-table-wrapper table tbody td .event-item.toplu-is-gorusmesi {
    background-color: #6F4E37;
    color: #fff;
}
/* 15. TBale ve Modern Dans Gösterisi */
.content-area .content-main .calendar-area .calendar-table-wrapper table tbody td .event-item.bale-ve-modern-dans-gosterisi {
    background-color: #a30f6f;
    color: #fff;
}

div#popup_notification.show {
display: flex !important ;
align-items: center;
justify-content: center;
}

.website-new .website-content a:nth-child(2) {
font-size: 11px !important;
color: #fff !important;
height: 50px !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
font-weight: 500 !important;
font-family: 'Montserrat' !important;
}
.website-new .website-content {
background-color: #09384b !important;
}

.website-new .website-content a:nth-child(1) {
/* height: 111px; */
display: flex !important;
justify-content: center !important;
align-items: center !important;
background-color: #ddd !important;
padding: 5px !important;
border-radius: 10px !important;
}
/* Her kategori için özel renk */
.event-checkbox.seramik .checkmark {
    background-color: #c67c5a;
}

.event-checkbox.cini .checkmark {
    background-color: #4da6ff;
}

.event-checkbox.turk-halk-muzigi .checkmark {
    background-color: #ff7043;
}

.event-checkbox.turk-sanat-muzigi .checkmark {
    background-color: #9575cd;
}

.event-checkbox.cocuk-korosu .checkmark {
    background-color: #81c784;
}

.event-checkbox.resim .checkmark {
    background-color: #f06292;
}

.event-checkbox.ahsap-boyama .checkmark {
    background-color: #bcaaa4;
}

.event-checkbox.tiyatro .checkmark {
    background-color: #ffb300;
}

.event-checkbox.bale .checkmark {
    background-color: #ba68c8;
}

.event-checkbox.modern-dans .checkmark {
    background-color: #64b5f6;
}

.event-checkbox.yaratici-drama .checkmark {
    background-color: #ff8a65;
}

.event-checkbox.baglama .checkmark {
    background-color: #aed581;
}

.event-checkbox.gitar .checkmark {
    background-color: #fdd835;
}

.event-checkbox.cagdas-sirk-sanatlari .checkmark {
    background-color: #26c6da;
}


.mudurluk_a {
    justify-content: center !important;
    align-items: center !important;
    display: block !important;
    gap: 5px !important;
    padding: 20px;
    height: auto !important;
    width: 100%;
    float: left;
    line-height: 27px !important;
}


a.tab-btn.mudurluk_a.active svg path {
    fill: #fff !important;
}
a.tab-btn.mudurluk_a:hover svg path {
    fill: #fff !important;
}


.mudurluk_a svg {
    width: 100%;
    float: left;
    margin-bottom: 10px;
}
.qr_text {
    text-align: center;
    width: 100%;
    padding-top: 10px;
    float: left;
    font-weight: 600;
}

.karabaglar-btn {
    border: 1px solid rgba(255, 255, 255, 0.30) !important;
    background: #0F4C64 !important;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.11), 0px 19px 5.5px -14px rgba(0, 0, 0, 0.12), 0px 4px 16px 0px rgba(18, 18, 18, 0.20);
    transition: 0.3s;
}
p#countdown-expired {
    text-align: center;
    color: #fff;
    justify-content: center;
    align-items: center;
    display: flex;
    font-weight: 600;
}
ul.footer-contact a {
    color: #fff;
}

.mevzuat-table {
    margin-top: 20px;
}

.mevzuat-table .section-title {
    font-size: 18px;
    font-weight: 600;
    color: #0f3d56;
    margin-bottom: 12px;
}

.styled-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.styled-table thead {
    background-color: #f5f8fa;
}

.styled-table th {
    text-align: left;
    padding: 12px 10px;
    font-weight: 600;
    color: #1e293b;
    border-bottom: 1px solid #e2e8f0;
}

.styled-table td {
    padding: 10px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
}

.styled-table tr:hover {
    background-color: #f9fafb;
}

.download-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: #0f4c64;
    font-weight: 500;
    transition: color 0.2s ease;
}

.download-link:hover {
    color: #064863;
}

.download-link img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}
table.styled-table tr td {
    width: 33.33%;
}

.event-box img {
    width: 140px;
    height: 140px;
}
.active-counter-event{
    bottom:50px !important;
}
.event-box {
    position: absolute;
    bottom: 0px;
    right: 2%;
    float: right;
}
.scroll-down-slider {
    text-align: center;
    position: absolute;
    bottom: 0px;
    width: 100%;
}

.scroll-down-slider img {
    width: 75px;
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(275deg) brightness(106%) contrast(101%);
    opacity: 0.7;
}
.event-banner {
    margin-bottom: 70px !important;
}

/* Color circles */
.color-options .color {
    border: 1px solid #cfd6db;
}

.color-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 20px 0;
}

.color {
    width: 32px;
    height: 32px;
    border-radius: 6px;               
    cursor: pointer;
    border: 1px solid #d5d9dd;        
    background-color: #e3e8ef;      
    transition: .2s ease;
}

.color:hover {
    transform: scale(1.07);
    border-color: #b8bec4;
}

body.loaded.modal-open .modal,
body.loaded.modal-open .modal p,
body.loaded.modal-open .modal span {
    color: #222 !important;
}
.instagram-show-hide {
    width: 100%;
    float: left;
    background-color: #043B58;
    color: #fff;
}
.social-media-content {
    height: 590px;
    overflow: hidden;
    transition: height 0.4s ease;
}

.social-media-content.expanded {
    height: auto;
}
#popup_notification  .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: -5px;
}

#popup_notification span.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #a8a8a8 !important;
}

#popup_notification  span.swiper-pagination-bullet {
    background-color: #004e7e !important;
    opacity: 1;
}

.modal.fade {
            opacity: 0;
            transition: opacity 0.6s ease;
            z-index: -1;
        }

        .modal.show {
            display: block;
            opacity: 1;
            z-index: 9999;
        }
        #popup_notification.modal {
            display: flex !important;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translate3d(0, 20px, 0);
            transition: opacity 0.85s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.85s cubic-bezier(0.23, 1, 0.32, 1);
            z-index: -1;
        }

        #popup_notification.modal.show {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translate3d(0, 0, 0);
            z-index: 9999;
        }

        /* Modal dialog boyutu ve responsive */
        .modal-dialog {
            max-width: 800px;
            /* İsteğe bağlı olarak büyüt/küçült */
            margin: 1.75rem auto;
        }

        .modal-lg {
            max-width: 90%;
            /* Büyük modal için genişlik */
        }

        /* Modal içerik ve kenarlıklar */
        .modal-content {
            background-color: #ffffff00;
            border-radius: 0.5rem;
            padding: 0;
            transition: opacity 0.85s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.85s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .modal.fade .modal-content {
            opacity: 0;
            transform: scale(0.92);
        }

        .modal-content.animate-out {
            opacity: 0;
            transform: scale(0.9);
        }
        .modal.show .modal-content {
            opacity: 1;
            transform: scale(1);
        }

        #popup_notification .modal-content {
            opacity: 0;
            transform: scale(0.92);
            transition: opacity 0.85s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.85s cubic-bezier(0.23, 1, 0.32, 1);
        }

        #popup_notification.modal.show .modal-content {
            opacity: 1;
            transform: scale(1);
        }

        /* Modal başlık ve kapatma butonu */
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            border-bottom: 1px solid #ffffff00;
        }

        .modal-title {
            margin: 0;
            font-size: 1.25rem;
            font-weight: 500;
        }

        .btn-close {
            background: transparent;
            border: 0;
            font-size: 1.25rem;
            cursor: pointer;
        }


        /* Görseller için */
        .modal-img {
            width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
        }

        /* Mobil ve desktop görüntü ayırımı */
        .mobile-image-modal {
            max-width: 100%;
        }

        .desktop-image-modal {
            max-width: 100%;
        }

        .mySwiper {
            width: 90%;
        }

        .mySwiper .swiper-slide {
            border-radius: 8px;
            text-align: center;
            transition: transform 0.4s;
        }

        .mySwiper .swiper-slide img {
            width: 100%;
            object-fit: fill;
            border-radius: 20px !important;
            height: 550px;
            width: 550px;
        }

        .modal-body p {
            color: #fff !important;
            text-align: left;
        }

        .modal-header {
            color: #fff !important;
        }

        .swiper-button-next {
            color: #fff !important;
        }

        .swiper-button-prev {
            color: #fff !important;
        }

        span.swiper-pagination-bullet.swiper-pagination-bullet-active {
            background-color: #154f66 !important;
        }

        div#popup_notification {
            --bs-modal-border-color: none !important;
        }

        button.btn-close.btn-modal-close {
            padding: 5px;
            display: flex;
            vertical-align: middle;
            align-items: center;
            justify-content: center;
            background-color: #0d4b64 !important;
            background: #fff !important;
            color: #0d4b64 !important;
            opacity: 1;
        }

        .modal-header {
            background-color: #fff !important;
            color: #000 !important;
            border-bottom: 1px solid #dedede;
        }

        .modal-bg-white {
            background-color: #fff;
            color: #000 !important;
        }

        .modal-bg-white p {
            color: #000 !important;
        }

        .modal-bg-white {
            height: 440px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }

        .modal-backdrop {
            --bs-backdrop-bg: #0F4C64 !important;
            --bs-backdrop-opacity: 0.7 !important;
        }

        #page-loader {
            position: fixed;
            inset: 0;
            background: radial-gradient(circle at top, #f0f8ff, #ffffff);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 999999;
            transition: opacity 0.45s ease, visibility 0.45s ease;
        }

        #page-loader .loader-content {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
        }

        .loader-ring {
            width: 78px;
            height: 78px;
            border-radius: 50%;
            border: 4px solid rgba(15, 76, 100, 0.35);
            border-top-color: #0F4C64;
            border-right-color: #0F4C64;
            animation: loader-spin 1.1s linear infinite;
            box-shadow: 0 8px 25px rgba(15, 76, 100, 0.15);
        }

        #page-loader .loader-text {
            font-size: 16px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #0F4C64;
            font-weight: 600;
            animation: loader-text-pulse 1.6s ease-in-out infinite;
        }

        @keyframes loader-spin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        @keyframes loader-text-pulse {
            0% {
                opacity: 0.2;
                transform: translateY(4px);
            }
            50% {
                opacity: 1;
                transform: translateY(0);
            }
            100% {
                opacity: 0.2;
                transform: translateY(4px);
            }
        }

        #page-loader.loader-hide {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }


        
        
#popup_notification .popup-hero-image {
    transform-origin: center;
    will-change: transform, opacity, filter;
}

#popup_notification.popup-animating .popup-hero-image {
    opacity: 0;
}

#popup_notification.popup-animating .swiper-slide-active .popup-hero-image {
    animation: popupHeroEntrance 1.05s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes popupHeroEntrance {
    0% {
        opacity: 0;
        transform: perspective(1600px) translate3d(0, 35px, 0) scale(0.92) rotateX(-18deg) rotateY(-3deg);
        filter: blur(10px);
    }
    45% {
        opacity: 1;
        transform: perspective(1600px) translate3d(0, -8px, 40px) scale(1.05) rotateX(6deg) rotateY(0deg);
        filter: blur(0px);
    }
    70% {
        transform: perspective(1600px) translate3d(0, 6px, 0) scale(0.995) rotateX(-3deg);
    }
    100% {
        opacity: 1;
        transform: perspective(1600px) translate3d(0, 0, 0) scale(1) rotateX(0deg) rotateY(0deg);
    }
}

	/*.modal .mySwiper .swiper-slide img {
    transition: transform 0.5s ease, opacity 0.4s ease !important;
    transform-style: preserve-3d;
}

        
        .modal .mySwiper .swiper-slide-active img {
            transform: none !important;
            opacity: 1 !important;
            z-index: 5;
            box-shadow: none !important;
        }

        
        .modal .mySwiper .swiper-slide-next img {
            transform: perspective(1200px) rotateY(-18deg) rotateZ(2deg) scale(0.92);
            transform-origin: center right;
            opacity: 0.9;
            z-index: 3;
        }

        
        .modal .mySwiper .swiper-slide-prev img {
            transform: perspective(1200px) rotateY(18deg) rotateZ(-2deg) scale(0.92);
            transform-origin: center left;
            opacity: 0.9;
            z-index: 3;
        }*/



        .website-new {
            width: 100% !important;
            padding: 10px;
        }

        .website-new .website-content {
            background-color: #fff;
            width: 20%;
            padding: 10px;
            float: left;
            border-radius: 10px;
            margin-right: 10px;
        }

        .website-new .website-content img {
            width: 100%;
        }

        .website-new .website-content a {
            float: left;
            width: 100%;
            text-align: center;
            /* height: 80px; */
        }

        .website-new .website-content a:nth-child(1) {
            height: 111px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #F8F8F8;
            padding: 5px;
        }

        .website-swiper {
            /* justify-content: center !important; */
        }



        /* Mobil bottom nav */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 90px;
    background: #ffffff;
    border-top: 1px solid #e2e2e2;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 9999;
    padding: 4px 0;
}

.mobile-bottom-nav .bottom-nav-item {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #0F4C64;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    min-height: 70px;
}

.mobile-bottom-nav .bottom-nav-btn {
    border: 0;
    background: transparent;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #0F4C64;
    font-size: 14px;
}

.mobile-bottom-nav img {
    width: 30px;
    height: 30px;
    display: block;
    margin-bottom: 2px;
    object-fit: contain;
}

/* Alt bar içerikleri kapatmasın diye body'ye boşluk */
@media (max-width: 991px) {
    body {
        padding-bottom: 80px;
    }
}

/* Çocuk menü (sadece has-children için) */
.mobile-bottom-nav .has-children {
    position: relative;
}

.mobile-bottom-nav .bottom-nav-children {
    position: absolute;
    bottom: 72px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 8px 10px;
    min-width: 180px;
    display: none;
    z-index: 99999;
}



.mobile-bottom-nav .bottom-nav-children a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    color: #0F4C64;
    text-decoration: none;
    font-size: 12px;
    white-space: nowrap;
}

.mobile-bottom-nav .bottom-nav-children img {
    width: 18px;
    height: 18px;
    margin-bottom: 0;
}

/* Açık state */
.mobile-bottom-nav .has-children.open .bottom-nav-children {
    display: block;
}



.sub-menu a {
    background-color: #ffffff00 !important;
    box-shadow: none !important;
}
.sub-menu li.active a {
    border-radius: var(--spacing-sm, 6px) !important;
    background: rgba(4, 59, 88, 0.06) !important;
    box-shadow: 0 10px 10.1px -12px rgba(0, 41, 63, 0.16), 0 1px 1.4px 0 rgba(0, 41, 63, 0.12) !important;
    color: var(--Text-Text-Medium-700, #0B3647) !important;
}

ul.sub-menu {
    margin-top: 15px;
}

.live-indicator {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background-color: #ffffff42;
            color: #fff;
            font-size: 14px;
            font-weight: 600;
            padding: 6px 14px;
            border-radius: 20px;
            line-height: 1;
        }

        /* KIRMIZI NOKTA */
        .live-dot {
            width: 10px;
            height: 10px;
            background-color: #e00000;
            border-radius: 50%;
            position: relative;
        }

        /* YANIP SÖNME EFEKTİ */
        .live-dot::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background-color: rgba(224, 0, 0, 0.7);
            animation: livePulse 1.4s infinite ease-out;
        }

        @keyframes livePulse {
            0% {
                transform: scale(1);
                opacity: 1;
            }

            100% {
                transform: scale(2.4);
                opacity: 0;
            }
        }
	.isbirliklerimiz {
    padding: 15px;
}
.isbirliklerimiz .card-img-item {
    display: block;
    background: #fff;
    border-radius: 20px;
    border: 2px solid #92D050; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.35s ease;
    text-align: center;
    height: 100%;
    position: relative;
    overflow: hidden; 
    z-index: 1;
}
/* SOL ALT LACİVERT VURGU  */
.isbirliklerimiz .card-img-item::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 12px;
    height: 100px;
    background-color: #92D050;
    z-index: 5;
    border-top-right-radius: 10px;

}

.isbirliklerimiz .card-img-item:hover {
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.15),
        0 0 25px rgba(143, 201, 221, 0.6);
    transform: translateY(-4px);
}

.isbirliklerimiz .img-content {
border-radius: 14px;
    overflow: visible;

}

.isbirliklerimiz .img-content img {
    width: 100%;
    height: 160px;
    object-fit: fill !important;
    border-radius: 12px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.3s ease;
}

.isbirliklerimiz .card-text-content {
    margin-top: 14px;
	padding:10px;
    padding-bottom: 6px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.isbirliklerimiz .card-text-content h3 {
    font-size: 16px !important ;
    font-weight: 600;
    color: #043b58;
    margin: 0;
}
.dijital-projeler {
    padding: 15px;
}
.dijital-projeler .card-img-item {
    display: block;
    background: #fff;
    border-radius: 10px;
    border: 2px solid #043b58; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.35s ease;
    text-align: center;
    height: 100%;
    position: relative;
    overflow: hidden; 
    z-index: 1;
}
/* SOL ALT LACİVERT VURGU ) */
.dijital-projeler .card-img-item::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 12px;
    height: 100px;
    background-color: #043b58;
    z-index: 5;
    border-top-right-radius: 10px;

}

.dijital-projeler .card-img-item:hover {
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.15),
        0 0 25px rgba(143, 201, 221, 0.6);
    transform: translateY(-4px);
}

.dijital-projeler .img-content {
border-radius: 14px;
    overflow: visible;

}

.dijital-projeler .img-content img {
    width: 100%;
    height: 160px;
    object-fit: fill !important;
    border-radius: 12px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.3s ease;
}

.dijital-projeler .card-text-content {
    margin-top: 14px;
	padding:10px;
    padding-bottom: 6px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.dijital-projeler .card-text-content h3 {
    font-size: 16px !important ;
    font-weight: 600;
    color: #043b58;
    margin: 0;
}
/* sosyal projeler */

.sosyal-projeler .card-img-item {
	
	display: block;
    background: #fff;
    border-radius: 20px;
    border: 2px solid #f8c180; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.35s ease;
    text-align: center;
    height: 100%;
    position: relative;
    overflow: hidden; 
    z-index: 1;
}

/* SOL ALT LACİVERT VURGU  */
.sosyal-projeler .card-img-item::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 12px;
    height: 100px;
    background-color: #f8c180;
    z-index: 5;
    border-top-right-radius: 10px;

}

.sosyal-projeler .card-img-item:hover {
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.15),
        0 0 25px rgba(143, 201, 221, 0.6);
    transform: translateY(-4px);
}

.sosyal-projeler .img-content {
    border-radius: 14px;
    overflow: visible;
    
}

.sosyal-projeler .img-content img {
    width: 100%;
    height: 160px;
      object-fit: fill !important;
    border-radius: 12px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.3s ease;
}

.sosyal-projeler .card-text-content {
    margin-top: 14px;
	padding:10px;
    padding-bottom: 6px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.sosyal-projeler .card-text-content h3 {
    font-size: 16px !important ;
    font-weight: 600;
    color: #043b58;
    margin: 0;
}

/* yatirim projeleri */
.yatirim-projeleri .card-img-item {
    display: block;
    background: #fff;
    border-radius: 20px;
    border: 2px solid #043b58; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.35s ease;
    text-align: center;
    height: 100%;
    position: relative;
    overflow: hidden; 
    z-index: 1;
}

/* SOL ALT LACİVERT VURGU  */
.yatirim-projeleri .card-img-item::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 12px;
    height: 100px;
    background-color: #043b58;
    z-index: 5;
    border-top-right-radius: 10px;

}


.yatirim-projeleri .card-img-item:hover {
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.15),
        0 0 25px rgba(143, 201, 221, 0.6);
    transform: translateY(-4px);
}

.yatirim-projeleri .img-content {
    border-radius: 14px;
    overflow: visible;

}

.yatirim-projeleri .img-content img {
    width: 100%;
    height: 160px;
    object-fit: fill !important;
    border-radius: 12px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.3s ease;
}

.yatirim-projeleri .card-text-content {
    margin-top: 14px;
	padding:10px;
    padding-bottom: 6px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.yatirim-projeleri .card-text-content h3 {
    font-size: 16px !important ;
    font-weight: 600;
    color: #043b58;
    margin: 0;
}

/* tamamlanan projeler */
.tamamlanan-projeler .card-img-item {
    display: block;
    background: #fff;
    border-radius: 20px;
    border: 2px solid #E5BDBC; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.35s ease;
    text-align: center;
    height: 100%;
    position: relative;
    overflow: hidden; 
    z-index: 1;
}
/* SOL ALT LACİVERT VURGU */
.tamamlanan-projeler .card-img-item::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 12px;
    height: 100px;
    background-color: #E5BDBC;
    z-index: 5;
    border-top-right-radius: 10px;

}
.tamamlanan-projeler .card-img-item:hover {
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.12),
        0 0 25px rgba(252, 180, 215, 0.6);
    transform: translateY(-4px);
}

.tamamlanan-projeler .img-content {
    border-radius: 14px;
    overflow: visible;

}

.tamamlanan-projeler .img-content img {
    width: 100%;
    height: 160px;
    object-fit: fill !important;
    border-radius: 12px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.3s ease;
}

.tamamlanan-projeler .card-text-content {
    margin-top: 14px;
	padding:10px;
    padding-bottom: 6px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tamamlanan-projeler .card-text-content h3 {
    font-size: 16px !important ;
    font-weight: 600;
    color: #043b58;
    margin: 0;
}	

/* devam eden projeler */
.devam-eden-projeler .card-img-item {
    display: block;
    background: #fff;
    border-radius: 20px;
    border: 2px solid #E5BDBC; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.35s ease;
    text-align: center;
    height: 100%;
    position: relative;
    overflow: hidden; 
    z-index: 1;
}
/* SOL ALT LACİVERT VURGU  */
.devam-eden-projeler .card-img-item::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 12px;
    height: 100px;
    background-color: #E5BDBC;
    z-index: 5;
    border-top-right-radius: 10px;

}
.devam-eden-projeler .card-img-item:hover {
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.12),
        0 0 25px rgba(252, 180, 215, 0.6);
    transform: translateY(-4px);
}

.devam-eden-projeler .img-content {
    border-radius: 14px;
    overflow: visible;

}

.devam-eden-projeler .img-content img {
    width: 100%;
    height: 160px;
    object-fit: fill !important;
    border-radius: 12px;
	/* YENİ: Resme özel gölge */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.3s ease;
}

.devam-eden-projeler .card-text-content {
    margin-top: 14px;
	padding:10px;
    padding-bottom: 6px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.devam-eden-projeler .card-text-content h3 {
    font-size: 16px !important ;
    font-weight: 600;
    color: #043b58;
    margin: 0;
}

.proje-category-card {
    padding: 15px;
}

.proje-card-inner {
    background: #ffffff;
    border-radius: 22px;
	border: 1px solid #043b58;
    padding: 30px 24px;
    text-align: center;
    height: 100%;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.35s ease;
    position: relative;
}

.proje-card-inner:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);
}

.proje-title {
    font-size: 20px;
    font-weight: 600;
    color: #1f2d3d;
    margin-bottom: 28px;
}

.proje-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 32px;
    border-radius: 50%;
    background: #f4f7fb;
    display: flex;
    align-items: center;
    justify-content: center;
}

.proje-icon img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.proje-btn {
    display: inline-block;
    margin-top: auto;
    padding: 12px 28px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    background: #f0f3f5;
    color: #fff;
    transition: all 0.3s ease;
	
}

.proje-btn:hover {
    background: linear-gradient(90deg, #043b58, #95bfd9);
    color: #fff;
}


.news-content.owl-carousel.owl-loaded .item {
    margin-right: 2px !important;
}

section.content-area {
    min-height: 600px;
}


@media (max-width: 991.98px) {
    #sidebarMenu {
        overflow: hidden;
    }

    #sidebarMenu.collapsed li:not(.left-menu-header) {
        display: none;
    }

    .left-menu-header {
        cursor: pointer;
        /*display: flex;*/
        justify-content: space-between;
        align-items: center;
    }

    .menu-toggle-arrow {
        transition: transform 0.3s ease;
    }

    #sidebarMenu.open .menu-toggle-arrow {
        transform: rotate(180deg);
    }
}


/* Başlangıç */
#popup_notification.popup-animating .modal-dialog {
    transform: scale(0.9) translateY(30px);
    opacity: 0;
}

/* Açılırken */
#popup_notification.show .modal-dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
    transition: all 0.35s cubic-bezier(.4,0,.2,1);
}




.content-area .content-main.content-neler-yaptik .card-tabs .card-img-item .card-text-content h3 {
   
    font-size: 14px;
   line-height: 20px;
}

.content-area .content-main.content-neler-yaptik .card-tabs .card-img-item .img-content img {

    aspect-ratio: 338.33 / 218.01;
}


.right-menu-content-p{
    
}

body main .content-area .content-main.right-menu-content-p p {
    color: var(--Text-Text-Medium-700, #0B3647);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.18px;
}

body main .content-area .content-main.right-menu-content-p ul li {
    color: var(--Text-Text-Medium-700, #0B3647);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.18px;
}

/* 
.mobile-bottom-menu{
    display: none;
}

@media (max-width: 991px) {
    .mobile-bottom-menu{
        display: block;
    }
    .footer-logo-center-mobil{
        text-align: center !important;
            margin-bottom: 20px;
    }
    .mobile-bottom-menu {
        position: fixed;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 24px);
        background: rgba(255,255,255,0.95);
        backdrop-filter: blur(10px);
        border-radius: 16px;
        box-shadow:
            0 6px 20px rgba(0,0,0,0.08);
        z-index: 9999;
        padding: 6px 0;
    }

    .mobile-bottom-menu ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0;
        padding: 0 6px;
        list-style: none;
    }

    .mobile-bottom-menu li {
        flex: 1;
        text-align: center;
    }

    .mobile-bottom-menu a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 6px 0;
        text-decoration: none;
        color: #6c7a86;
        font-size: 10.5px;
        font-weight: 500;
        transition: all .25s ease;
    }

    .mobile-bottom-menu img {
        width: 22px;
        height: 22px;
        opacity: .75;
        transition: all .25s ease;
        object-fit: contain;
    }

    .mobile-bottom-menu li.active a {
        color: #0b3a5c;
        font-weight: 600;
    }

    .mobile-bottom-menu li.active img {
        opacity: 1;
        transform: translateY(-1px);
    }

    .mobile-bottom-menu a:active {
        transform: scale(0.96);
    }

    body {
        padding-bottom: 110px;
    }
} */


.mobile-bottom-menu {
    display: none;
}


div#submenu-7 {
    display: none;
}
@media (max-width: 991px) {
    .mobile-bottom-menu {
        display: block;
    }


    div#submenu-7 {
        display: block;
    }
    /* ========== BOTTOM BAR ========== */
    .mobile-bottom-menu {
        position: fixed;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 24px);
        background: #ffffff;
        border-radius: 18px;
        box-shadow: 0 8px 30px rgba(0,0,0,.12);
        z-index: 9999;
    }

    .mobile-bottom-menu > ul {
        display: flex;
        margin: 0;
        padding: 8px;
        list-style: none;
    }

    .mobile-bottom-menu > ul > li {
        flex: 1;
        text-align: center;
    }

    .mobile-bottom-menu a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        color: #5f6f7c;
        text-decoration: none;
    }

    .mobile-bottom-menu img {
        width: 22px;
        height: 22px;
        opacity: .85;
         transition: all .25s ease;
        object-fit: contain;
    }

    /* ========== SUBMENU (BOTTOM SHEET) ========== */
    .mobile-submenu {
        position: fixed;
        left: 0;
        bottom: -100%;
        width: 100%;
        max-height: 75vh;
        background: #fff;
        /* border-radius: 22px 22px 0 0; */
        box-shadow: 0 -10px 40px rgba(0,0,0,.2);
        padding: 16px;
        transition: .35s ease;
        z-index: 9998;
        overflow-y: auto;
    }

    .mobile-submenu.active {
        top: 0;
        max-height: 100% !important;
    }

    .submenu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 600;
        font-size: 15px;
        margin-bottom: 14px;
    }

    .submenu-header button {
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
    }

    .mobile-submenu ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mobile-submenu li a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 10px 6px;
        border-radius: 14px;
        text-align: center;
        font-size: 11px;
        color: #333;
        text-decoration: none;
    }

    .mobile-submenu li a:hover {
        background: #f3f6f9;
    }

    .mobile-submenu li img {
        width: 30px;
        height: 30px;
    }

    .mobile-submenu span {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.3;
    }
}


@media (max-width: 991px) {

    .mobile-bottom-menu ul {
        position: relative;
        align-items: flex-end;
    }

    /* ORTA LOGO */
    .center-logo-item {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 10px;
        z-index: 10;
    }

    .center-logo-link {
        display: block;
        padding: 0;
    }

    .center-logo-circle {
        width: 48px;
        height: 48px;
        background: #033b58;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateY(-22px);
    }

    .center-logo-circle img {
        width: 36px;
        height: 36px;
        object-fit: contain;
        filter: brightness(0) invert(1);
    }

    .mobile-bottom-menu > ul > li {
        flex: 1;
    }

    .mobile-bottom-menu > ul > li:nth-child(3) {
        /* margin-right: 48px; */
    }

    .mobile-bottom-menu > ul > li:nth-child(4) {
        /* margin-left: 48px; */
    }
    .header-bayrak {
        height: 70px;
    }
    .scroll-down-slider{
        display: none;
    }
    .footer-logo-center-mobil{
        text-align: center !important;
            margin-bottom: 20px;
    }
    footer.footer-area {
        padding-top: 20px !important;
    }

    .event-box-content {
        display: flex;
        width: 100%;
    }

    .event-box.active-counter-event .bugun-buradayiz {
        right: 10px !important;
        left: unset !important;
    }

    .bugun-buradayiz {
        right: 20px !important;
        left: unset !important;
        width: 50% !important;
    }

    .event-box.active-counter-event {
        width: 50% !important;
        text-align: right;
        left: 0;
        right: 0px !important;
    }

    .event-box-content .active-counter-event {
        text-align: left !important;
    }

    .event-box-content .bugun-buradayiz {
        text-align: right !important;
    }
}

.right-menu-content a {
    color: var(--Karabalar-Brand, #043B58);
    font-size: 14px;
    gap: 8px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
   /* display: flex;*/
    margin-bottom: 0;
} 


.event-box.bugun-buradayiz {
    left: 2%;
    right:initial;
}




/* COOKIE CARD */

.cookie-card {
    position: fixed;
    bottom: 30px;
    right: 30px;
    max-width: 420px;
    width: 90%;
    background: rgba(15, 60, 70, 0.95);
    backdrop-filter: blur(10px);
    color: #fff;
    padding: 20px 22px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    z-index: 9999;
    animation: fadeInUp 0.4s ease;
}

.cookie-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cookie-text {
    font-size: 14px;
    line-height: 1.5;
}

.cookie-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cookie-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    border: none;
    transition: 0.3s ease;
}

.accept-btn {
    background: #ffffff;
    color: #0f3c46;
}

.accept-btn:hover {
    opacity: 0.85;
}

.manage-btn {
    background: transparent;
    border: 1px solid #ffffff;
    color: #ffffff;
}

.manage-btn:hover {
    background: rgba(255,255,255,0.1);
}


/* MODAL */

.cookie-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
}

.cookie-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}

.cookie-modal-box {
    position: relative;
    background: #ffffff;
    max-width: 520px;
    margin: 100px auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    animation: fadeInUp 0.4s ease;
}

.cookie-modal-header {
    background: #0f3c46;
    color: #fff;
    padding: 18px 22px;
    font-weight: 600;
    font-size: 16px;
}

.cookie-modal-content {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cookie-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.option-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
}

.option-desc {
    font-size: 12px;
    color: #666;
}

.cookie-modal-footer {
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    background: #f5f7f9;
}

.save-btn {
    background: #0f3c46;
    color: #fff;
}

.save-btn:hover {
    opacity: 0.9;
}


/* SWITCH */

.switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 22px;
}

.switch input {
    display: none;
}

.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #ccc;
    border-radius: 30px;
    transition: .3s;
}

.slider:before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    top: 3px;
    background: white;
    border-radius: 50%;
    transition: .3s;
}

input:checked + .slider {
    background: #0f3c46;
}

input:checked + .slider:before {
    transform: translateX(20px);
}

.cookie-option.disabled {
    opacity: 0.6;
}


/* ANIMATION */

@keyframes fadeInUp {
    from {
        transform: translateY(15px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}


/* RESPONSIVE */

@media (max-width: 576px) {
    .cookie-card {
        right: 50%;
        transform: translateX(50%);
        bottom: 20px;
    }

    .cookie-modal-box {
        margin: 60px 15px;
    }
}
@media (min-width:1440px){
   section.hero-area .hero-slider-wrapper .hero-static-content{
        min-height:100vh !important;
    }
}
.cookie-modal.active {
    display: block !important;
}
div#ozgecmisContent {
    height: 300px;
    overflow: scroll;
}
/* Kart Genel Yapısı - Daraltılmış ve Ortalanmış */
.member-card {
    background: #ffffff;
    border-radius: 15px; /* Referanstaki yumuşak köşeler */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid #eee !important;
    max-width: 260px; 
    margin: 0 auto;   /* Sütun içinde kartı ortalar */
    padding: 1.5rem !important; 
}

.member-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(4, 59, 88, 0.12) !important;
    border-color: #043B58 !important;
    background-color: #fcfcfc;
}

/* Fotoğraf Stili - Belirgin Çerçeve */
.member-card img {
    width: 110px;
    height: 140px;
    object-fit: cover;
    border: 1px solid #043B58; /* Kurumsal lacivert çerçeve */
    padding: 2px;
    background: #fff;
    transition: transform 0.3s ease;
}

.member-card:hover img {
    transform: scale(1.05);
}

/* İsim Stili - Montserrat ve Netlik */
.member-card h5 {
    font-family: 'Montserrat', sans-serif;
    color: #043B58;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    margin-top: 15px;
    margin-bottom: 20px;
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
}


.ozgecmis-btn {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 1px;
    color: #043B58 !important; /* Başlangıç metin rengi */
    background: transparent !important;
    border: none !important;
    padding: 10px 30px !important;
    position: relative;
    overflow: hidden; /* Taşmaları gizle (dolma efekti için şart) */
    transition: color 0.4s ease;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
}


.ozgecmis-btn::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px; 
    background-color: #043B58; 
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: -1; 
}

.ozgecmis-btn:hover {
    color: #ffffff !important; 
}

.ozgecmis-btn:hover::before {
    height: 100%; 
}
.member-info-area {
    margin-top: 10px;
}

.row.g-4 {
    --bs-gutter-x: 2.5rem; 
}
/* MODAL ANA YAPISI */
.member-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
}

.member-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(4, 59, 88, 0.5); /* Belediye laciverti tonlu şeffaflık */
    backdrop-filter: blur(5px); /* Arka planı flulaştırır */
}

/* MODAL KUTUSU (Referans: image_97dd26.png) */
.member-modal-wrapper {
    position: relative;
    background: #ffffff;
    width: 90%;
    max-width: 800px; /* Geniş ve ferah yapı */
    border-radius: 15px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    z-index: 100000;
    overflow: hidden;
    animation: modalScaleUp 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes modalScaleUp {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* KAPATMA BUTONU */
.member-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 35px;
    color: #bbb;
    cursor: pointer;
    line-height: 1;
    transition: 0.3s;
}

.member-modal-close:hover {
    color: #043B58;
}

/* İÇERİK ALANI */
.member-modal-body {
    padding: 40px;
}

/* ÜST BİLGİ ALANI (Resim + İsim + Tel) */
.member-modal-top {
    display: flex;
    align-items: center;
    gap: 35px;
}

.member-modal-img img {
    width: 180px;
    height: 200px;
    border-radius: 50%;
    object-fit: fill;
    border: 5px solid #f8f9fa;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.member-modal-info h3 {
    font-family: 'Montserrat', sans-serif;
    color: #043B58;
    font-weight: 700;
    font-size: 1.7rem;
    margin-bottom: 12px;
}


.member-contact-row {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #0077C8; /* Canlı mavi tonu */
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.15rem;
}

/* AYRAÇ ÇİZGİSİ */
.member-modal-divider {
    border: 0;
    height: 1px;
    background: #eee;
    margin: 30px 0;
}

/* ÖZGEÇMİŞ METNİ (Content Alanı) */
.member-modal-content {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.8;
    color: #555;
    font-size: 1.05rem;
    max-height: 400px;
    overflow-y: auto; /* Çok uzun metinler için kaydırma */
    padding-right: 15px;
    text-align: justify;
}

/* Kaydırma Çubuğu Tasarımı */
.member-modal-content::-webkit-scrollbar {
    width: 6px;
}
.member-modal-content::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 10px;
}

/* MOBİL UYUMLULUK */
@media (max-width: 768px) {
    .member-modal-top {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    .member-modal-wrapper {
        width: 95%;
        margin: 10px;
    }
}