/* Kullanılan menü başlıkları - Modern Desktop Görünüm */
@media (min-width: 769px) {
    .header .nav {padding: 0 10px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; justify-content: left; align-items: center; min-height: 45px; border-radius: 12px; margin: 5px 0; position: relative; z-index: 10000000;}
    .header .nav li {margin: 0 4px; position: relative; z-index: 10000000;}
    .header .nav li a {padding: 3px; font-size: 16px; font-weight: 600; position: relative; display: block; line-height: 1.4; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); color: #0d5092; text-decoration: none; border-radius: 8px; letter-spacing: 0.1px; white-space: nowrap;}
    .header .nav li a:hover {color: brown; background: linear-gradient(135deg, rgba(26, 118, 209, 0.08) 0%, rgba(26, 118, 209, 0.12) 100%); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(26, 118, 209, 0.15);}
    /* Dropdown1 Menu - Modern Glassmorphism */
    .header .nav li .dropdown1 {opacity: 1 !important; padding: 5px 0; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); width: 380px; position: absolute; left: 50%; transform: translateX(-50%) translateY(0px) scale(0.95); top: calc(100% + 2px); z-index: 20000050; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08); border-radius: 16px; opacity: 0; visibility: hidden; transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid rgba(255, 255, 255, 0.8); border-top: 3px solid #6c63ff; overflow: visible; padding-top: 12px;}
    .header .nav li:hover .dropdown1 {opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0px) scale(1);}
    /* Ana menü öğesi ile dropdown arasında görünmez köprü oluştur */
    .header .nav li:hover .dropdown1::before {content: ""; position: absolute; top: -4px; left: 0; right: 0; height: 4px; background: transparent; z-index: 20000051;}
    /* Dropdown açıkken diğer header öğelerini arka plana al - sadece ana menü seviyesindeki li öğeleri */
    .header .nav:has(li:hover .dropdown1) > li:not(:hover) {z-index: 1; pointer-events: none;}
    .header .nav:has(li:hover .dropdown1) > li:not(:hover) > a {pointer-events: none; color: #0d5092 !important; background: none !important; transform: none !important; box-shadow: none !important;}
    /* Dropdown içindeki öğelerin pointer-events'ını koru */
    .header .nav li .dropdown1,
    .header .nav li .dropdown1 * {pointer-events: auto !important;}
    /* Eski tarayıcılar için alternatif çözüm - JavaScript ile class eklenebilir */
    .header .nav.dropdown-active > li:not(.dropdown-active-item) {z-index: 1; pointer-events: none;}
    .header .nav.dropdown-active > li:not(.dropdown-active-item) > a {pointer-events: none; color: #0d5092 !important; background: none !important; transform: none !important; box-shadow: none !important;}
    .header .nav.dropdown-active li .dropdown1,
    .header .nav.dropdown-active li .dropdown1 * {pointer-events: auto !important;}
    .header .nav li .dropdown1 a {padding: 5px 10px; font-weight: 500; color: #34495e !important; display: block; white-space: nowrap; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); position: relative; margin: 2px 8px; border-radius: 10px;}
    .header .nav li .dropdown1 a::before {content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleX(0); width: 3px; height: 0%; background: linear-gradient(180deg, #1A76D1 0%, #6c63ff 100%); border-radius: 0 3px 3px 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
    .header .nav li .dropdown1 a:hover {color: #1A76D1 !important; background: linear-gradient(135deg, rgba(26, 118, 209, 0.08) 0%, rgba(108, 99, 255, 0.08) 100%); padding-left: 12px; transform: translateX(2px);}
    .header .nav li .dropdown1 a:hover::before {transform: translateY(-50%) scaleX(1); height: 60%;}
    .header .nav li .dropdown1 li {margin: 0; float: none; border-bottom: 1px solid rgba(0, 0, 0, 0.04); position: relative;}
    .header .nav li .dropdown1 li:last-child {border-bottom: none;}
    .header .nav li .dropdown1 li a::before {display: none;}

    /* Dropdown2 Menu - Modern Tasarım */
    .header .nav .dropdown1 li .dropdown2 {padding: 25px 0; margin-left:0px; background: rgba(248, 248, 248, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06); border-radius: 16px; display: block; position: absolute; left: calc(100% + 4px) !important; right: auto !important; top: -8px; width: 400px; opacity: 0; visibility: hidden; transform: translateX(-10px) scale(0.95); transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid rgba(255, 255, 255, 0.8); border-left: 3px solid #1A76D1; overflow: hidden; z-index: 10000060;}
    .header .nav .dropdown1 li:hover > .dropdown2,
    .header .nav .dropdown1 li .dropdown2:hover {opacity: 1; visibility: visible; transform: translateX(0px) scale(1);}
    .header .nav .dropdown1 li .dropdown2 li a {padding: 5px 10px; color: #34495e !important; font-weight: 500 !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); margin: 2px 8px; border-radius: 10px; position: relative;}
    .header .nav .dropdown1 li .dropdown2 li a::before {content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleX(0); width: 3px; height: 0%; background: linear-gradient(180deg, #1A76D1 0%, brown 100%); border-radius: 0 3px 3px 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
    .header .nav .dropdown1 li .dropdown2 li a:hover {color: brown !important; font-weight: 600 !important; background: linear-gradient(135deg, rgba(26, 118, 209, 0.08) 0%, rgba(139, 69, 19, 0.08) 100%); padding-left: 12px; transform: translateX(2px);}
    .header .nav .dropdown1 li .dropdown2 li a:hover::before {transform: translateY(-50%) scaleX(1); height: 60%;}
    .header .nav .dropdown1 li:hover > a {color: #1A76D1 !important; font-weight: 600; background: linear-gradient(135deg, rgba(26, 118, 209, 0.06) 0%, rgba(26, 118, 209, 0.1) 100%);}
    /* FTR Menü Başlığı Özel Stili */
    .header .nav li#ftr > a {font-weight: 800; color: #2196F3; font-size: 18px; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif}
}

/* Mobil ve küçük ekranlar için eski stiller (slicknav korunuyor) */
@media (max-width: 768px) {
    .header .nav {padding: 0 5px; background-color: rgba(255, 255, 255); display: flex; justify-content: left; align-items: center; min-height: 40px;}
    .header .nav li {margin: 0 10px; position: relative;}
    .header .nav li a {padding: 5px 0; font-size: 16px; font-weight: bold; position: relative; display: block; line-height: 1.5; transition: color 0.3s ease, transform 0.3s ease; color: #22223b; text-decoration: none;}
    .header .nav li a:hover {color: #1A76D1; transform: translateY(-2px);}
    .header .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;}
    .header .nav li:hover a::before {opacity: 1; width: 100%; visibility: visible;}
    .header .nav li .dropdown1 {padding: 5px 0; background: #ffffff; width: 360px; position: absolute; left: 50%; transform: translateX(-50%) translateY(10px) scaleY(0); top: 100%; z-index: 999; box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.2); border-radius: 8px; opacity: 0; visibility: hidden; transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1); border-left: 3px solid #6c63ff;}
    .header .nav li:hover .dropdown1 {opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0px) scaleY(1);}
    .header .nav li .dropdown1 a {padding: 5px 10px; font-weight: normal; color: #22223b !important; display: block; white-space: nowrap; transition: all 0.2s ease;}
    .header .nav li .dropdown1 a:hover {color: #1A76D1 !important;}
    .header .nav li .dropdown1 li {margin: 0; float: none; border-bottom: 1px solid rgba(0, 0, 0, 0.05);}
    .header .nav li .dropdown1 li:last-child {border-bottom: none;}
    .header .nav li .dropdown1 li a::before {display: none;}
    .header .nav .dropdown1 li .dropdown2 {padding: 5px 0; background-color: #f8f8f8; box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.15); border-radius: 8px; display: block; position: absolute; left: 93%; top: 0; width: 380px; opacity: 0; visibility: hidden; transform: translateY(10px) scaleY(0.8); transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1); border-left: 3px solid #1A76D1;}
    .header .nav .dropdown1 li:hover > .dropdown2 {opacity: 1; visibility: visible; transform: translateY(0px) scaleY(1);}
    .header .nav .dropdown1 li .dropdown2 li a {padding: 5px 10px; color: #22223b !important; font-weight: normal !important;}
    .header .nav .dropdown1 li .dropdown2 li a:hover {color: brown !important; font-weight: bold !important; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);}
    .header .nav .dropdown1 li:hover > a {color: #1A76D1 !important; font-weight: bold;}
    /* FTR Menü Başlığı Özel Stili - Mobil */
    .header .nav li#ftr > a {font-weight: 800; color: #2196F3; font-size: 18px;}
    /* Diyet Listesi Oluştur - Mobil için özel stil */
    .header .nav .dropdown1 p a {position: relative; display: block; padding-right: 5px; min-height: 30px;}
    .header .nav .dropdown1 p a span {position: static !important; display: block; font-size: 11px !important; line-height: 1.3 !important; text-align: left !important; margin-top: 3px; max-width: 100% !important; white-space: normal !important; word-wrap: break-word !important; right: auto !important; top: auto !important;}
    .header .nav .dropdown1 p a span:first-of-type {margin-top: 5px;}
}

    /* Dropdown3 Menu - Modern Tasarım (Şu an kullanılmıyor ama gelecekte kullanılabilir) */
    @media (min-width: 769px) {
        .header .nav .dropdown2 li .dropdown3 {padding: 5px 0; background: rgba(240, 255, 240, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06); border-radius: 16px; display: block; position: absolute; left: calc(100% + 4px); top: -8px; width: 220px; opacity: 0; visibility: hidden; transform: translateX(-10px) scale(0.95); transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid rgba(255, 255, 255, 0.8); border-left: 3px solid brown; overflow: hidden; z-index: 10000070;}
        .header .nav .dropdown2 li:hover > .dropdown3,
        .header .nav .dropdown2 li .dropdown3:hover {opacity: 1; visibility: visible; transform: translateX(0px) scale(1);}
    .header .nav .dropdown2 li:hover > a {color: #1A76D1 !important; font-weight: 600; background: linear-gradient(135deg, rgba(26, 118, 209, 0.06) 0%, rgba(26, 118, 209, 0.1) 100%);}
    .header .nav .dropdown2 li .dropdown3 li a {padding: 5px 10px; color: #34495e !important; font-weight: 500 !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); margin: 2px 8px; border-radius: 10px; position: relative;}
    .header .nav .dropdown2 li .dropdown3 li a:hover {color: brown !important; font-weight: 600 !important; background: linear-gradient(135deg, rgba(139, 69, 19, 0.08) 0%, rgba(139, 69, 19, 0.12) 100%); padding-left: 24px; transform: translateX(2px);}
    
    /* Dropdown2 her zaman sağda açılır - JavaScript ile dinamik kontrol yapılacak */
}

@media (max-width: 768px) {
    .header .nav .dropdown2 li .dropdown3 {padding: 10px 0; background-color: #f0fff0; box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.1); border-radius: 8px; display: block; position: absolute; left: 100%; top: 0; width: 200px; opacity: 0; visibility: hidden; transform: translateY(10px) scaleY(0.8); transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1); border-left: 3px solid brown;}
    .header .nav .dropdown2 li:hover > .dropdown3 {opacity: 1; visibility: visible; transform: translateY(0px) scaleY(1);}
    .header .nav .dropdown2 li:hover > a {color: #1A76D1 !important; font-weight: bold;}
}

/* Slicknav (Mobil Menü) */
.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 {color: rgb(17, 2, 150) !important; font-weight: 500;}
.slicknav_menu .slicknav_nav .dropdown2 li a {font-weight: 400; color: #1a69aa !important;}
.slicknav_nav .slicknav_row, .slicknav_nav a {padding: 4px 0px; margin: 0; font-weight: 500;}
.slicknav_nav .slicknav_row:hover, .slicknav_nav a:hover {color: brown !important; background-color: #f8f8f8; padding-left: 10px; transition: all 0.3s ease;}
.slicknav_open a {font-weight: 500;}
.slicknav_open a:hover {color: brown !important; font-weight: bold;}
.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_menu .slicknav_nav li:hover {background-color: #f7f7f7; transition: all 0.3s ease;}

/* Mevcut renkler: #1A76D1 (mavi), brown (kahverengi), #6c63ff (mor) */
/* Diğer stiller olduğu gibi kalacak */
.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.1s ease-in-out;} .special-1:hover {background-color:#f0fff0; color:darkred; font-weight:bold;}
.special-2 {cursor: pointer; font-size:15px; color:mediumblue; transition: all 0.1s ease-in-out;} .special-2:hover {background-color:#fff4f0; color:darkred; font-weight:bold;}
.special-3 {cursor: pointer; font-size:15px; color:mediumblue; transition: all 0.1s ease-in-out;} .special-3:hover {background-color:#f8f9fa; color:darkred; font-weight:bold;}

.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;}
.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;}

.header-sagmetin {color: gray; font-size:0.75rem; font-weight:400; float:right; padding-right:5px; vertical-align: super;}
.header-sagmetin-destekci {color:green; font-size:0.75rem; font-weight:400; float:right; padding-right:5px; vertical-align: super;}
.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); }
  
.copy-btn { transition: all 0.2s ease; border: 1px solid rgb(150, 150, 150) !important; background-color:white !important; color: black !important; transform: scale(1.05); line-height: 1.2; padding: 5px 5px !important; font-size: 0.8rem !important; border-radius: 8px; }
.copy-btn:hover { border-color: #2196F3; box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25); background-color:rgb(27, 98, 156) !important; color: white !important; }
.copy-btn i { font-size: 0.8rem !important; }
@media (max-width: 768px) { .copy-btn { padding: 5px 5px !important; font-size: 0.8rem !important; border-radius: 8px; } .copy-btn i { font-size: 0.8rem; } }


.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;}
@keyframes destekciHeartBeat { 0%,100%{transform:scale(1);} 20%{transform:scale(1.18);} 40%{transform:scale(0.95);} 60%{transform:scale(1.10);} 80%{transform:scale(0.98);} }
.destekci-btn-ozel:hover { background: linear-gradient(90deg, #185a9d 0%, #43cea2 100%); color: #fff; box-shadow: 0 4px 16px rgba(24,90,157,0.18); transform: scale(1.07); }
.destekci-anim { animation: colorChange 5s infinite alternate; }
@keyframes colorChange { 0% { color: blue; } 50% { color: green; } 100% { color: red; } }
.container-chckbox {padding: 5px; border-radius: 10px;/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */ line-height:1.5} 

/* .container {padding:5px !important; margin:5px !important; width:auto !important} */
.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: 1.0rem;}
    .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; display: none; }
#scrollToTop:hover { background-color: #0056b3; }
#scrollToTop i { margin: 0; }



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

/* slider olayı sadece index.php de kullanılıyor */
.slider .single-slider { 
    height: 420px; 
    background-color: rgb(245, 245, 245); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    display: flex; /* İçeriği dikeyde ortalamak için flexbox kullan */
    flex-direction: column; /* İçeriği sütun olarak sırala */
    justify-content: center; /* Dikeyde ortala */
    align-items: flex-start; /* Yatayda başlangıca hizala */
    padding: 0 5%; /* Kenarlardan boşluk bırak */
}
.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 { margin-bottom: 50px !important; overflow: visible !important; } /* Dots'lar için alt boşluk ve butonların görünmesi için */
.slider .owl-carousel .owl-stage-outer { overflow: visible !important; } /* Butonların görünmesi için */
.slider .owl-carousel .owl-nav { margin: 0; position: absolute; top: 50%; width: 100%; margin-top: -25px; z-index: 10; }
.slider .owl-carousel .owl-nav div { text-align: center; background: #fff; color: #7d7d7d; font-size: 26px; position: absolute; margin: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; padding: 0; border-radius: 50%; box-shadow: 0 5px 15px rgba(0,0,0,0.1); z-index: 10; }
.slider .owl-carousel .owl-nav div:hover { background: #007bff; color: #fff; box-shadow: 0 8px 20px rgba(0,123,255,0.2); }
.slider .owl-carousel .owl-controls .owl-nav .owl-prev {left: 10px; bottom: auto;}
.slider .owl-carousel .owl-controls .owl-nav .owl-next {right: 10px; bottom: auto;}
.slider .owl-carousel .owl-dots { text-align: center; margin-top: 20px; margin-bottom: 10px; position: relative; z-index: 5; }
.slider .owl-carousel .owl-dots .owl-dot { height: 10px; width: 10px; background: #d3d3d3 !important; border-radius: 50%; display: inline-block; margin: 0 5px; transition: all 0.3s ease; }
.slider .owl-carousel .owl-dots .owl-dot.active { background: #007bff !important; width: 25px; border-radius: 15px; }
.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; /* Mobil için padding bırak */
        align-items: center; /* Mobil görünümde içeriği ortala */
        text-align: center; /* Mobil görünümde metni ortala */
    }
    .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: 6px; margin-bottom: 12px; }
.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-title { color: brown;}
.modal-content {
    background-color: #fefefe;
    margin: 0 auto;
    padding: 5px;
    width: 95%;
    min-width: 10%;
    max-width: 420px;
    max-height: 95%;
    position: fixed;
    top: 50%;
    left: 50%;
    border: 1px solid #888;
    border-radius: 8px;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1060;
}

/* Bootstrap 5.3.8 Modal Genişlik Standardizasyonu - Tüm modallar 450px */
.modal-dialog { max-width: 450px !important; }
.modal-dialog.modal-sm { max-width: 450px !important; }
.modal-dialog.modal-lg { max-width: 450px !important; }
.modal-dialog.modal-xl { max-width: 450px !important; }
/* Mobil uyumluluk */
@media (max-width: 576px) {
    .modal-dialog { max-width: 90% !important; margin: 1rem auto !important; }
}
.modal-body { padding-left: 5px; margin-left: 5px; width: 100% !important; }
.modal-body input,.modal-body select,.modal-body textarea,.modal-body button,.modal-body label,.modal-body h5,.modal-body h6{font-size:14px;padding-left:5px;margin-left:5px;}
.modal-body p{font-size:14px!important;}
.modal-body span{font-size:14px!important;}
.modal-content video { width: 100%; height: auto; max-width: 100%; max-height: 100%; border-radius: 8px; }

.close { position: absolute; top: 5px; right: 15px; color: blue; font-size: 30px; font-weight: bold; cursor: pointer; z-index: 1070; /* Ensure close button is on top */ }
.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: auto; 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;}