/* Kullanılan menü başlıkları */
.header .nav {background-color: rgba(255, 255, 255);}
.header .nav li a {font-size: 16px; font-weight: bold; padding: 10px; position: relative; display: inline-block; line-height: 1.5; transition: color 0.3s; }
.header .nav li a:hover { font-weight: bold; color: #1A76D1; }

/* Menü başlıkları altındaki animasyonlu çizgi */
.nav li a::before { position: absolute; content: ""; left: 0; bottom: 0; height: 3px; width: 0%; background: brown; border-radius: 5px 5px 0 0; opacity: 0; visibility: hidden; transition: all 0.4s ease; }
.nav li:hover a:before { opacity: 1; width: 100%; visibility: visible; }

/* Dropdown1 Menu */
.nav li:hover .dropdown1 { opacity: 1; visibility: visible; transform: translateY(0px); color: #22223b;}
.nav li .dropdown1 { background: #ffffff; width: 325px; position: absolute; left: -5px; top: 100%; z-index: 999; box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15); transform-origin: 0 0 0; transform: scaleY(0.2); transition: all 0.5s ease 0s; opacity: 0; visibility: hidden; border-left: 3px solid #6c63ff; }
.nav li .dropdown1 a { font-weight: normal; }
.nav li .dropdown1 a:hover { font-weight: bold; color: #1A76D1 !important;}
.nav li .dropdown1 li { float: none; margin: 0; color: #22223b !important; border-bottom: 1px solid #c2c1ff;}
.nav li .dropdown1 li:hover {font-weight: bold; color: #1A76D1;}
.nav li .dropdown1 li:last-child { border: none; }
.nav li .dropdown1 li a { font-size: 14px; padding: 5px; color: #22223b; display: block; text-transform: capitalize; background: transparent; transition: all 0.1s ease; color: #22223b !important;}
.nav li .dropdown1 li a:before { display: none; }
.nav li .dropdown1 li:last-child a { border-bottom: 0px; }
.nav li .dropdown1 li:hover a { color: #6c63ff;}

/* Dropdown2 Menu */
.nav .dropdown1 li:hover > .dropdown2 { max-height: fit-content; opacity: 1; visibility: visible; margin-left: -27px; transition: all 0.5s ease 0.1s; }
.nav .dropdown1 li > .dropdown2 { margin-left: -50px; opacity: 0; visibility: hidden; max-height: -24px; transition: all 0.5s ease 0.1s; }
.nav .dropdown1 li .dropdown2 { background-color: #f8f8f8; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); display: block; position: absolute; left: 108%; top: 0; max-height: 0; width: 325px; opacity: 0; visibility: hidden; overflow: hidden; transition: max-height 0.5s ease, opacity 0.5s ease, visibility 0.5s ease;}
.nav .dropdown1 li .dropdown2 li { font-weight: bold; color: #1A76D1;}
.nav .dropdown1 li .dropdown2 li a { color: #22223b !important; font-weight: normal !important;}
.nav .dropdown1 li .dropdown2 li a:hover { font-weight: bold !important; color: brown !important; background-color: #ffffff; }
.nav .dropdown1 li:hover > a { color: #1A76D1 !important; font-weight: bold; }

/* Dropdown3 Menu */
.nav .dropdown2 li>.dropdown3 { max-height: 0; opacity: 0; visibility: hidden; transition: all 0.5s ease; overflow: hidden; }
.nav .dropdown2 li:hover>.dropdown3 { max-height:fit-content; opacity: 1; visibility: visible; left: 24px; transition: all 0.5s ease 0.1s; }
.nav .dropdown3 li { font-weight: 300 !important; }
.nav .dropdown2 li:hover > a { color: #1A76D1 !important; font-weight: bold; }

.slicknav_nav {background-color: rgba(255, 255, 255); border:0; box-shadow: 0 1px 20px , 0.25; border-radius: 12px; padding:5px;}
.slicknav_menu { display: block; }
.slicknav_menu ul { margin-top: -5px !important;}
.slicknav_menu ul li { font-size: 18px; }
.slicknav_menu ul li a:hover { color: brown !important; }
.slicknav_menu .slicknav_nav .dropdown1 li a { font-weight: normal; color: #1b308d !important; border-bottom: 1px solid #e2e1e1 }
.slicknav_menu .slicknav_nav .dropdown1 li a:hover { color: brown !important; }
.slicknav_menu .slicknav_nav .dropdown2 li a { color: brown !important; font-weight: normal; }
.slicknav_nav .slicknav_row, .slicknav_nav a { padding: 0; margin: 0; padding: 6px 0; font-weight: 500; }
.slicknav_open a { font-weight: 500; }
.slicknav_menu .slicknav_nav li a { color: #4a4e69 !important; font-weight: bold; margin-top: 2px; }
.slicknav_menu .slicknav_nav li a:hover { font-weight: bold; color: brown; }
.slicknav_nav .slicknav_row, .slicknav_nav a {padding: 0; margin: 0; padding: 6px 0; font-weight: 500; }
.slicknav_open a { font-weight: 500; }

.slider { display: flex; align-items: center; width: 100%; margin: 10px 0; }
input { margin-left: 5px; width: 15px; text-align: center;}
.slider .noUi-handle { cursor: pointer;}

input[type="password"] {-webkit-text-security: disc; /* iOS ve bazı mobil tarayıcılarda şifre maskesi */}
.img-hover-effect {transition: transform 0.3s ease;}.img-hover-effect.hovered {transform: scale(2) translateX(25px);background: rgba(240, 248, 255, 0.8);}
.hover-effect {font-size:15px; color:brown; border-radius: 4px; box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3); transition: all 0.2s ease-in-out;} .hover-effect:hover {background-color:#f0fff0; font-weight: bold; font-size:16px;}
.special-1 {cursor: pointer; font-size:15px; color:mediumblue; transition: all 0.2s ease-in-out;} .special-1:hover {background-color:#f0fff0; color:darkred; font-weight:bold; padding:3px; font-size:16px; border-radius: 4px; box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3);}
.special-2 {cursor: pointer; font-size:15px; color:mediumblue; transition: all 0.2s ease-in-out;} .special-2:hover {background-color:#fff4f0; color:darkred; font-weight:bold; padding:3px; font-size:16px; border-radius: 4px; box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3);}
.special-3 {cursor: pointer; font-size:15px; color:mediumblue; transition: all 0.2s ease-in-out;} .special-3:hover {background-color:#f8f9fa; color:darkred; font-weight:bold; padding:3px; font-size:16px; border-radius: 4px; box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3);}

.bg-lb {background-color:rgb(240, 248, 255)}
.bg-lg {background-color:#f0fff0}
.bg-lr {background-color:#fff4f0}
.bg-ly {background-color:#f8f9fa}

.baslik-duzenleme {width: 100%; box-sizing: border-box; height:30px}
.metin-duzenleme {width: 100%; height: 75px; box-sizing: border-box;}
.guncelle-button {background-color: green; color: white; height:20px; padding:3px}
.iptal-button {background-color: red; color: white; height:20px; padding:3px}

.content-wrapper { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 10px; }
.content-wrapper div { width: 48%; }
.content-wrapper img { max-width: 100%; height: auto; margin: 0; padding: 0; }
.checkbox-wrapper { display: flex; align-items: center; margin-top: 10px; background-color:#f0f8ff; color:brown; font-weight:550; font-size:0.95rem }
.checkbox-wrapper input { margin-right: 10px; }
.icerikler {font-weight:550;  font-size: small;}
.banneregz {background-color: #f0f8ff; width: 100%; height: 100px; padding: 0; font-size: medium; text-align: center; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.3s;}
.bannercontainer {background-color: #f0f8ff; width: 100%; height: 100px; padding: 0; font-size: medium; text-align: center; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.3s;}
.bannerkurul {background-color: #f0fff0; width: 100%; height: 120px; padding: 0; font-size: medium; text-align: center; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.3s;}
.footnoteftr {background-color: #f0f8ff; width: 100%;  padding: 0; margin-top: 10px; font-size: small; font-weight:400}
.banner_signup {color: #1e90ff !important; text-decoration: none; font-weight: bold;}
.footnotebody {background-color: #f0f8ff; width: 100%;  padding: 0; margin-top: 10px; font-size: 15px; font-weight:400}
.footnoteref {background-color: #f0f8ff; width: 100%;  padding: 0; margin-top: 10px; font-size: 13px; font-weight:400}

.print-button { display: block; width: 100%; padding: 10px; font-size: 16px; text-align: center; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; margin-top: 20px; }
.title-input { width: 100%; padding: 10px; margin-bottom: 20px; font-size: 12px; border: 1px solid #ddd; border-radius: 4px; }
.page-break { page-break-before: always; margin: 0; padding: 0; }
.item-container { page-break-inside: avoid; margin-bottom: 10px; }
.control-buttons { margin-bottom: 10px; }
.control-buttons button { margin-right: 10px; padding: 5px; font-size: 14px; border: none; border-radius: 4px; cursor: pointer; }

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
input[type=number] {-moz-appearance: none; appearance: none;}
/*body, img {user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;} */
.button-container {width: 100%; background-color: #f1f1f1; padding: 10px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px; display: flex; align-items: center;} 
.button-container .title {flex: 1; text-align: left; padding-left: 20px; font-weight: bold;}

.modal-content { background-color: #fefefe; padding: 20px; border: 1px solid #888; width: auto; max-width: 95%; max-height: 95%; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); border-radius: 8px; }
.modal-content video { width: 100%; height: auto; max-width: 100%; max-height: 100%; border-radius: 8px; }
.close { position: absolute; top: 3px; right: 3px; color:blue; font-size: 30px; font-weight: bold; cursor: pointer; }
.close:hover, .close:focus { color: red; text-decoration: none; cursor: pointer; }
video { width: 100%; height: auto; }
.modern-button { border-radius: 30px; padding: 5px 10px; font-size: 18px; background-color: brown; color: white; width: auto; font-weight: bold; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2); }

.Ana-Buton-Red {
    display: inline-block;
    margin: 2px;
    padding: 3px 5px;
    background-color: rgba(204, 76, 76, 0.8);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95em;
    text-transform: uppercase;
    box-shadow: 0 4px 6px rgba(204, 76, 76, 0.3);
    transition: all 0.3s ease-in-out;
  }
  
  .Ana-Buton-Red-Flex {
    display: block;
    margin: 2px;
    padding: 3px 5px;
    background-color: rgba(204, 76, 76, 0.8);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    height: auto;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 4px 6px rgba(204, 76, 76, 0.3);
    transition: all 0.3s ease-in-out;
  }
  
  .Ana-Buton-Red-Midi {
    display: inline-block;
    margin: 2px;
    padding: 3px 5px;
    background-color: rgba(204, 76, 76, 0.8);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85em;
    box-shadow: 0 4px 6px rgba(204, 76, 76, 0.3);
    transition: all 0.3s ease-in-out;
  }
  
  .Ana-Buton-Red-Mini {
    display: inline-block;
    margin: 2px;
    padding: 3px 5px;
    background-color: rgba(204, 76, 76, 0.8);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.75em;
    box-shadow: 0 4px 6px rgba(204, 76, 76, 0.3);
    transition: all 0.3s ease-in-out;
  }
  
  .Ana-Buton-Red:hover,
  .Ana-Buton-Red-Flex:hover,
  .Ana-Buton-Red-Midi:hover,
  .Ana-Buton-Red-Mini:hover {
    background-color: rgba(204, 76, 76, 0.6);
    box-shadow: 0 6px 8px rgba(204, 76, 76, 0.5);
  }
  

.Ana-Buton-Blue {
    display: inline-block;
    margin: 2px;
    padding: 3px 5px;
    background-color: rgba(52, 91, 197, 0.8);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95em;
    text-transform: uppercase;
    box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3);
    transition: all 0.3s ease-in-out;
  }
  
  .Ana-Buton-Blue-Flex {
    display: block;
    margin: 2px;
    padding: 3px 5px;
    background-color: rgba(52, 91, 197, 0.8);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    height: auto;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3);
    transition: all 0.3s ease-in-out;
  }
  
  .Ana-Buton-Blue-Midi {
    display: inline-block;
    margin: 2px;
    padding: 3px 5px;
    background-color: rgba(52, 91, 197, 0.8);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85em;
    box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3);
    transition: all 0.3s ease-in-out;
  }
  
  .Ana-Buton-Blue-Mini {
    display: inline-block;
    margin: 2px;
    padding: 3px 5px;
    background-color: rgba(52, 91, 197, 0.8);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.75em;
    box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3);
    transition: all 0.3s ease-in-out;
  }
  
  .Ana-Buton-Blue:hover,
  .Ana-Buton-Blue-Flex:hover,
  .Ana-Buton-Blue-Midi:hover,
  .Ana-Buton-Blue-Mini:hover {
    background-color: rgba(52, 91, 197, 0.6);
    box-shadow: 0 6px 8px rgba(0, 123, 255, 0.5);
  }
  
.style_getpro {font-size: small; height: 80px; width: 80px; line-height: 2; margin-top: 3px; }

.Ana-Baslik-Mavi {text-align: center; color: darkblue; font-size: larger;}
.Ana-Baslik-Bordo {text-align: center; color: darkred; font-size: larger;}
.Baslik-Mavi {text-align: center; font-size: 1.0em; color: blue !important;}
.Baslik-Bordo {text-align: center;font-size: 1.0em; color: darkred;}
.baslik {font-size: 1.1em; text-align: center; background-color:#f0f8ff; color: #d24545 !important;} 
.baslikcozger {font-size: 1.1em; text-align: center; background-color: #f0f8ff; color: #d24545 !important; border-color: #f0f8ff !important;}
.content-container {padding: 20px; border: 1px solid #ddd; height: 650px; overflow-y: auto;} 
.table-section {padding: 20px; border: 1px solid #ddd; margin-bottom: 20px;} 
.measurement-group {margin-bottom: 10px;}
.measurement-group label {display: inline-block;width: 300px;vertical-align: middle;}
.measurement-group input {width: 50px;margin-right: 10px;}
table {width: 100%; border-collapse: collapse; color:darkslateblue;} 
table, th, td {border: 1px solid rgba(0, 0, 0, 0.137);} 
th, td {padding: 8px; text-align: left;} 
tr {line-height: 1.5;}
.center {text-align: center;}
.center-bold {text-align: center; font-weight: bold;}
.centered-flexbox { display: flex; justify-content: center; align-items: center; height: 200px; border: 1px solid #000;}
.Shadow {box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);}
.Shadow-ozel {background-color:#f0f8ff; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); }

.flex-container {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;}

.animated-text {display: inline-block; overflow: hidden; white-space: nowrap; animation: typing 1s steps(30, end); }
.scale-up-text { display: inline-block; animation: scaleUp 1s ease-in-out;}
.wave-in-text { display: inline-block; animation: waveIn 1s ease-in-out;}
.flash-effect { animation: flash 1s 1;}

@keyframes waveIn { 0% { transform: translateX(-100%); } 50% { transform: translateX(10%); } 100% { transform: translateX(0); }}
@keyframes typing {from { width: 0; } to { width: 100%; }}
@keyframes scaleUp {from { transform: scale(0); } to { transform: scale(1); }}
@keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; }}
@keyframes rotateY360 {0% { transform: rotateY(0deg); } 16.67% { transform: rotateY(360deg); } 100% { transform: rotateY(360deg); }}
img.rotateY {animation: rotateY360 12s ease-in-out infinite;}
img.rotateY2 {animation: rotateY360 6s ease-in-out infinite;}

.container-chckbox {padding: 5px; border-radius: 10px;/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */ line-height:1.5} 

.container-chckbox div {margin-left:0px; margin-bottom: 3px; padding-left:10px;display:inline-block;transition: color 0.1s ease, font-weight 0.1s ease;}
.container-chckbox div:last-child {border-bottom: none;}
.container-chckbox input[type="checkbox"] {margin-right: 3px; height:14px; margin:0; padding:0;}
.container-chckbox div label {cursor: pointer; font-weight:500;font-size:16px}
.container-chckbox div label:hover {color:rgb(182, 0, 0);}
.options div {padding: 0px; margin-left:10px;}
.options div label {font-size: 14px; margin-left:0px; font-weight:420; position: relative; display: inline-block; cursor: pointer; color:#353535}
.options label:hover {color:rgb(74, 74, 248);}
@media (max-width: 768px) {.container-chckbox .options {grid-template-columns: 1fr;}}
@media (max-width: 768px) {.container-ikili {display: flex; flex-direction: column;} .yorumlar { width: 100%; margin-bottom: 10px;}}

/* Mobil cihazlar için stil düzenlemeleri */
@media (max-width: 768px) {
    h6 {font-size: 14px;}
    .content-container {padding: 3px;height: auto;}
    table {width: 100%;font-size: 12px;}
    table colgroup col {width: auto;}
    .preloader {display: none;}
    .main-menu {display: none;}
    ul.dropdown2 {font-size:auto !important; position: relative;} 

/* Mobil cihazlar için yan yana divleri dikey hizalama */
div[style*="flex: 0 0 30%"], div[style*="flex: 0 0 31%"], div[style*="flex: 0 0 17%"], div[style*="flex: 0 0 22%"] {flex: 0 0 100%;margin-bottom: 10px;}}

.accordion-item { margin-bottom: 10px; }
.accordion-header { width: 100%; padding: 5px; margin-top: 5px; margin-bottom: 0px; text-align: left; font-size: 16px; background: #007bff; color: white; border: none; cursor: pointer; outline: none; border-radius: 4px; }
.accordion-content { margin-top: 5px; padding-top: 0px; padding-bottom: 0px; display: none; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); }
.accordion p { font-size: 16px; display: inline; }
.accordion img { height: 200px; width: auto; }

#scrollUp { bottom: 15px; right: 15px; padding: 10px 20px; background: #527393; color: #fff; font-size: 25px; width: 45px; height: 45px; text-align: center; line-height: 45px; padding: 0; border-radius: 3px; box-shadow: 0px 0px 10px #00000026; }
#scrollUp:hover { background: #2C2D3F; }

/* #scrollToTop { position: fixed; bottom: 20px; right: 20px; background-color: #007BFF; color: white; border: none; border-radius: 5px; padding: 10px 15px; cursor: pointer; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); z-index: 1000; } 
#scrollToTop:hover { background-color: #0056b3; } */
#scrollToTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 50%;
    padding: 10px 15px;
    cursor: pointer;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    font-size: 24px; /* İkon boyutunu ayarlayın */
    display: none;  /* Başlangıçta butonu gizli tut */
}

#scrollToTop:hover {
    background-color: #0056b3;
}

#scrollToTop i {
    margin: 0; /* İkonun etrafındaki boşluğu sıfırlayın */
}



/*=================== Start Header CSS =====================*/
.header { background-color: #fff; position: relative; height: 40px;}
.header .navbar-collapse { padding: 0; }
.header .header-inner { background: #fff; z-index: 999; width: 100%; }
.header .logo { float: left; margin-top: 18px; }
.header .navbar { background: none; box-shadow: none; border: none; margin: 0; height: 0px; min-height: 0px; }
.header .nav li { margin-right: 15px; float: left; position: relative; }
.header .nav li:last-child { margin: 0; }

/* slider olayı sadece index.php de kullanılıyor */
.slider .single-slider { height: 500px; background-color: rgb(245, 245, 245); background-size: cover; background-position: center; background-repeat: no-repeat; }
.slider .single-slider .text { margin:auto; }
.slider .single-slider li,.slider .single-slider p { color: black;}
.slider .single-slider li { color: #000000; }
.slider.index2 .single-slider .text { margin:auto; }
.slider .single-slider h1 { color: #2C2D3F; font-size: 38px; font-weight: 700; margin: 0; padding: 0; line-height: 42px; }
.slider .single-slider h1 span { color: #1a76d1; }
.slider .single-slider { color:black; margin:auto; font-weight: 400; }
.slider .single-slider .button { margin:auto; }
.slider .single-slider .btn { color: #fff; background: #1a76d1; font-weight: 500; display: inline-block; margin: 0; margin-right: 10px; }
.slider .single-slider .btn:last-child { margin: 0; }
.slider .single-slider .btn.primary { background: #2C2D3F; color: #fff; }
.slider .single-slider .btn.primary:before { background: #1A76D1; }
.slider .owl-carousel .owl-nav { margin: 0; position: absolute; top: 50%; width: 100%; margin-top: -25px; }
.slider .owl-carousel .owl-nav div { text-align: center; background: #fff; color: #7d7d7d; font-size: 26px; position: absolute; margin: 0; -webkit-transition: all 0.4s ease; -moz-transition: all 4s ease; transition: all 0.4s ease; padding: 0; border-radius: 50%; }
.slider .owl-carousel .owl-nav div:hover { background: #2C2D3F; color: #fff; }
.slider .owl-carousel .owl-controls .owl-nav .owl-prev {left: 0px; bottom: -275px;}
.slider .owl-carousel .owl-controls .owl-nav .owl-next {right: 0px; bottom: -275px;}
.single-slider ul {padding-left: 20px;}
.single-slider ul li {font-size: 1.6rem;line-height: 150%;}
.single-slider ul p {font-size: 1.2rem; margin-top: 5px; line-height: 2rem; }
@media (max-width: 992px) {.slider .single-slider li,.slider .single-slider p {color: #000; opacity: 1;}}

/* Responsive adjustments */
@media (max-width: 768px) {.header-inner {flex-wrap: wrap;}
    .logo {justify-content: center;}
    .main-menu {text-align: center;}
    .single-slider ul li {font-size: 1.3rem;}
    .single-slider ul p {font-size: 1.1rem;}
    /* .container {padding-left: 10px; padding-right: 10px;} */
    .container ul img {width: 100%; height: auto;}
    .slider {height: auto;}
    .single-slider {height: auto; padding: 20px 0;}
    .services .single-service {margin-bottom: 20px;}
}

.card { background-color: #ffffff; border:none; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); padding: 15px; margin-bottom: 25px; }
.page-header-card { display: flex; justify-content: space-between; align-items: center; padding: 15px 25px; }
.page-header-card .title { color: #2c3e50; font-size: 20px; font-weight: 600; }
.page-header-card .counter { font-weight: 400; font-size: 14px; color: #555; display: flex; align-items: center; }
.page-header-card .counter-icon { vertical-align: middle; margin-right: 5px; }
.page-header-card .counter-text { margin-right: 15px; }
.card-title { color: darkblue; font-weight: 600; font-size: 24px; margin-top: 0; margin-bottom: 20px; border-bottom: 2px solid #eef2f5; padding-bottom: 10px; }
.card-sub-title { color: #2c3e50; font-weight: 600; font-size: 20px; margin-top: 0; margin-bottom: 20px; border-bottom: 2px solid #eef2f5; padding-bottom: 10px; }
.card-content { display: flex; align-items: flex-start; gap: 30px; }
.card-content .text-column { flex: 1; }
.card-content .image-column { width: 150px; flex-shrink: 0; text-align: center; }
.card-text { font-size: 16px; line-height: 1.7; margin: 0 0 12px 0; }
.card-text:last-child { margin-bottom: 0; }
.list-icon { color: #3498db; margin-right: 8px; }
.link { color: #3498db; text-decoration: none; font-weight: 500; }
.link:hover { text-decoration: underline; }
.text-primary { color: #2980b9; font-weight: bold; }
.text-danger { color: #c0392b; font-weight: bold; }
.text-purple { color: #8e44ad; font-weight: bold; }
.text-highlight { color: #e74c3c; font-weight: bold; }
.logo-image { max-width: 100%; height: auto; margin-bottom: 15px; }
.profile-image { width: 140px; height: 140px; border-radius: 10%; object-fit: cover;}

.modal-content { background-color: #fefefe; padding: 20px; border: 1px solid #888; width: auto; max-width: 95%; max-height: 95%; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; border-radius: 8px; }
.modal-content video { width: 100%; height: auto; max-width: 100%; max-height: 100%; border-radius: 8px; }
.close { position: absolute; top: 3px; right: 3px; color:blue; font-size: 30px; font-weight: bold; cursor: pointer; }
.close:hover, .close:focus { color: red; text-decoration: none; cursor: pointer; }
video { width: 100%; height: auto; }
.modern-button { border-radius: 30px; padding: 5px 10px; font-size: 18px; background-color: brown; color: white; width: auto; font-weight: bold;}
.reveal-on-scroll {opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 1.5s ease-out; }
.reveal-on-scroll.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal-on-scroll { transition: none; opacity: 1; transform: none; } }

/* Slider Animation */
.owl-item.active .single-slider h1 { animation: fadeInUp 1s both 0.6s; }
.owl-item.active .single-slider h6 { animation: fadeInUp 1s both 1s; }
.owl-item.active .single-slider .button { animation: fadeInDown 1s both 1.5s; }
/*=========================== End Hero Area CSS =============================*/

.ftr-uye ul { font-size: larger; font-weight: bold; color: brown; margin-left: 50px; }
.ftr-uye label {  margin: 5px; width: 100px; }
.ftr-uye form { margin-top: 20px; display: flex; flex-direction: column; width: 100%; }
.ftr-uye button { padding: 5px 15px; background-color: #007BFF; color: white; border: none; cursor: pointer; width: 315px; height: auto; font-size: medium; margin-left: 50px; }
.ftr-uye button:hover { background-color: #0056b3; font-weight: bold; }
.ftr-uye .form-group { display: inline; justify-content: space-between; align-items: left; margin-bottom: 10px; margin-left: 50px; }
.ftr-uye .form-group label { text-align: left; padding-right: 3px; font-size: medium; width: 100px; }
.ftr-uye .form-group option { text-align: left; padding-right: 3px; font-size: small; width: 500px; }
.ftr-uye .form-group input { font-size: small; margin-left: 0px; width: 200px; }
.ftr-uye .form-group select { width: 200px; font-size: small; padding-bottom: -5px; }
.ftr-uye .foot-text { margin-left: -50px; }
.ftr-uye .foot-text a { text-decoration: none; color: #0f04a5; }
.ftr-uye .foot-text a:hover { text-decoration: underline; color: #0056b3; font-weight: bold; }
#message, #signupMessage { color: red; margin-top: 10px; }

#TR22, #SR22 { margin-top:310px ; margin-left:18px ; }
#TR12, #SR12 { margin-top:272px ; margin-left:-12px ; }
#TR21, #SR21 { margin-top:290px ; margin-left:-5px ; }
#TR11, #SR11 { margin-top:261px ; margin-left:-7px ; }
#TR32, #SR32 { margin-top:310px ; margin-left:-1px ; }
#TR31, #SR31 { margin-top:290px ; margin-left:-7px ; }
#TRbilek, #SRbilek { margin-top:250px ; margin-left:-8px ; }
#TRdirsek, #SRdirsek { margin-top:180px ; margin-left:-2px ; }
#TR41, #SR41 { margin-top:290px ; margin-left:-7px ; }
#TR42, #SR42 { margin-top:310px ; margin-left:-9px ; }
#TRomuz, #SRomuz { margin-top:90px ; margin-left:0px ; }
#TR51, #SR51 { margin-top:288px ; margin-left:-8px ; }
#TR52, #SR52 { margin-top:305px ; margin-left:-7px ; }
#TRdiz, #SRdiz { margin-top:350px ; margin-left:20px ; }
#TLdiz, #SLdiz { margin-top:350px ; margin-left:60px ; }
#TL52, #SL52 { margin-top:305px ; margin-left:40px ; }
#TL51, #SL51 { margin-top:288px ; margin-left:-12px ; }
#TLomuz, #SLomuz { margin-top:90px ; margin-left:-25px ; }
#TL42, #SL42 { margin-top:310px ; margin-left:2px ; }
#TL41, #SL41 { margin-top:290px ; margin-left:-10px ; }
#TLdirsek, #SLdirsek { margin-top:180px ; margin-left:-20px ; }
#TLbilek, #SLbilek { margin-top:250px ; margin-left:-12px ; }
#TL31, #SL31 { margin-top:290px ; margin-left:3px ; }
#TL32, #SL32 { margin-top:310px ; margin-left:-5px ; }
#TL11, #SL11 { margin-top:261px ; margin-left:-3px ; }
#TL21, #SL21 { margin-top:290px ; margin-left:-7px ; }
#TL12, #SL12 { margin-top:272px ; margin-left:0px ; }
#TL22, #SL22 { margin-top:310px ; margin-left:-12px ; }

/* .GridCell'e genişlik ve hizalama ekleyin */
.GridCell{  width: 10px;  height: 10px; padding:0; margin:0; border: none;  float: left;};
.GridCell {display: inline-block; padding: 10px; text-align: center;}
  
/* Dairesel simülasyon */
.daire_buyuk {width: 24px;height: 24px;border-radius: 50%;border: 2px solid #333;background-color: white; cursor: pointer;transition: background-color 0.3s;}
.daire_kucuk {width: 12px;height: 12px;border-radius: 50%;border: 2px solid #333;background-color: white; cursor: pointer;transition: background-color 0.3s;}

/* Seçili durum */
.daire_buyuk.selected {background-color: red;}
.daire_kucuk.selected {background-color: red;}