/* MAIN PAGE */
header {width: 100%; height: 200px; position: relative; background: #ffffff;}
.mobil-sosyal {display: none;}
header #header-top {width: 1280px; height: 150px; margin: auto;}
header #header-top ul {width: 100%; height: 150px; align-items: center; display: flex; justify-content: center;}
header #header-top ul li {flex:1; align-items: center;}
header #header-top ul li:nth-child(1) {float: left;}
header #header-top ul li:nth-child(2) {text-align: center;}
header #header-top ul li:nth-child(3) {float: right; text-align: right;}
header #header-top ul li figure {width: 300px; margin: auto; float: none;}
header #header-top ul li figure img {width: 100%;}
header #header-top ul li:first-child a {color: #79573e; transition: all ease .5s; float: left; text-align: left;}
header #header-top ul li:first-child a:hover {color: #a88735; transition: all ease .5s;}
header #header-top ul li:last-child a {color: #ffffff; background: #79573e; border: 1px solid #79573e; display: block; border-radius: 15px; width: 30px; height: 30px; transition: all ease .5s; float: right; padding: 5px; text-align: center; margin-left: 7px;}
header #header-top ul li:last-child a:hover {color: #79573e; background: #ffffff; border: 1px solid #ffffff; transition: all ease .5s;}
header #header-top figure {float: left; display: block;}
header #header-bottom {width: 1280px; height: 50px; margin: auto;}
header #header-bottom nav ul {width: auto; height: auto; display: flex; align-items: center;}
header #header-bottom nav ul li {flex: 1; text-align: center;}
header #header-bottom nav ul li a {color: #79573e; transition: all ease .5s; padding: 10px 20px;}
header #header-bottom nav ul li a:hover {background: #79573e; color: #ffffff; transition: all ease .5s;}
/*header #header-bottom nav ul li:nth-child(5) a {background: #24ae01!important; color: #ffffff!important; transition: all ease .5s; padding: 10px 20px; animation: blinker 1.2s linear infinite;}
@keyframes blinker {
	50% {opacity: 0;}
}
header #header-bottom nav ul li:nth-child(5) a:hover {color: #24ae01!important; background: #ffffff!important; transition: all ease .5s;}
*/

#slider {position: relative; width: 100%; height: 600px;}
#slider .swiper-slide {margin-right: 0!important; position: relative;}
.swiper-slide a {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.slider-text {width: 1280px; height: auto; margin: auto; background: url(/images/slider-text-bg.png); padding:40px; border-radius: 10px; text-align: center;}
.slider-text h1 {font-weight: 700; font-size: 40px; color: #ffffff;}
.slider-text span {margin-top: 25px; font-weight: 300; font-size: 24px; color: #ffffff;}

.swiper-button-next,.swiper-button-prev{background:none!important;}
.slider-text{padding:10px; display: inline-block; color:#fff; margin: auto;}
#slider .swiper-slide{display:flex; align-items: center;}

#main-aboutus {width: 100%; height: auto; padding: 85px 0; background: #f6f6f6;}
#main-aboutus div {width: 1280px; height: auto; margin: auto;}
#main-aboutus div h1 {font-size: 32px; color: #494949; text-align: center; margin-bottom: 25px;}
#main-aboutus div p {font-size: 14px; color: #494949; text-align: center; margin-bottom: 25px;}
#main-aboutus div a {font-size: 14px; color: #cccccc; margin: auto; text-align: center; transition: all ease .5s;}
#main-aboutus div a:hover {color: #494949; transition: all ease .5s;}

#main-middle {width: 100%; height: auto; margin-top: 85px;}
#main-middle ul {width: 1280px; height: 350px; margin: auto; display: flex; justify-content: center; align-items: center;}
#main-middle ul li {width: 350px; height: 350px; flex: 1; background: #3167b1; float: left; margin: 0 37px; align-items: center; justify-content: center; transition: all ease .5s; position: relative;}
#main-middle ul li a {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#main-middle ul li figure {width: 120px; height: 120px; margin: auto; margin-top: 75px;}
#main-middle ul li figure img {width: 100%; height: 100%;}
#main-middle ul li h2 {font-size: 24px; color: #ffffff; text-align: center; margin-top: 50px;}
#main-middle ul li:hover {background: #77a0d9; transition: all ease .5s;}

#main-bottom {width: 100%; height: 385px; margin-top: 85px; margin-bottom: 85px;}

#main-bottom ul {width: 1280px; height: 385px; margin: auto; display: flex; justify-content: center; align-items: center; border-top: 1px solid #d0d0d0;}
#main-bottom ul li {width: 350px; height: 300px; flex: 1; float: left; margin: 85px 37px 0 37px; align-items: center; justify-content: center; position: relative; background-repeat: no-repeat; background-position: center; background-size: 50%;}
#main-bottom ul li a {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#main-bottom ul li figure {width: 120px; height: 120px; margin: auto; margin-top: 75px;}
#main-bottom ul li figure img {width: 100%; height: 100%;}
#main-bottom ul li h2 {font-size: 24px; color: #4c4c4c; text-align: center; margin-top: 50px;}
#main-bottom ul li p {font-size: 12px; color: #4c4c4c; text-align: center; margin-top: 50px;}
#main-bottom ul li:nth-child(1) {background-image: url(/images/user-images.png);}
#main-bottom ul li:nth-child(2) {background-image: url(/images/leaking.png);}
#main-bottom ul li:nth-child(3) {background-image: url(/images/sms.png);}
#main-bottom div {width: 1280px; height: 65px; margin: auto; text-align: right;}
#main-bottom div a {font-size: 14px; color: #ccc; transition: all ease .5s;}
#main-bottom div a:hover {color: #000; transition: all ease .5s;}
#main-map {width: 100%; height: 400px; position: relative; z-index: 0; opacity: 0.6;}

footer {width: 100%; height: 100px; background: #474747;}
footer .footer-bottom ul {width: 1280px; height: 100px; margin: auto; display: flex; align-items: center;}
footer .footer-bottom ul li {flex: 1; text-align: left; font-weight: 300; font-size: 12px; color: #ffffff;}
footer .footer-bottom ul li a {font-weight: 300; font-size: 14px; color: #ffffff; transition: all ease .5s;}
footer .footer-bottom ul li a:after {content: "/"; margin: 0 5px;}
footer .footer-bottom ul li a:last-child:after {content: ""; margin: 0;}
footer .footer-bottom ul li a:hover {color: #a1a1a1; transition: all ease .5s;}
footer .footer-bottom ul li:last-child {text-align: right;}
/* MAIN PAGE */

/* SUB PAGE */

main {width: 100%; height: auto; position: relative; background: #ffffff;}
main > figure > h1 {width: 100%; position: absolute; display: flex; justify-content: center; font-weight: 700; font-size: 50px; color: #ffffff; bottom: 150px;}

#content-figure {width: 100%; height: 300px; position: relative; background-repeat: no-repeat; background-position: center; background-size: cover;}
#content {width: 1280px; height: auto; position: relative; margin: auto; margin-top: 85px; margin-bottom: 85px; display: table;}
#breadcrumb {width: 100%; display: flex; align-items: center; position: absolute; bottom: 100px; justify-content: center;font-weight: 300; font-size: 16px;}

#breadcrumb > span {width: 94%; height: 1px; background: #e5e5e5; margin: auto; display: block;}
#breadcrumb li a {color: #ffffff; width: 100%; height: 100%; display: block;}
#breadcrumb li:last-child a {color: #ffffff; width: 100%; height: 100%; display: block;}
#breadcrumb li:last-child span {color: #ffffff;}
#breadcrumb li {position: relative; float: left; display: flex; color: #ffffff;}
#breadcrumb li:before {content: ">"; padding: 0 7px; color: #ffffff;}
#breadcrumb li:first-child:before {content: ""; padding: 0;}
#breadcrumb li:last-child:before {color: #ffffff;}

#article h1 {font-size: 30px; font-weight: 600; color: #4b4b4b; margin-bottom: 30px;}
#article h2 {font-size: 24px; font-weight: 500; color: #4b4b4b; margin-bottom: 30px; line-height: 36px;}
#article h3 {line-height: 28px; font-size: 22px; color: #4b4b4b; margin-bottom: 30px;}
#article p {font-size: 16px; line-height: 20px; font-weight: 400; color: #4b4b4b; margin-bottom: 15px;}
#article a {font-size: 16px; line-height: 20px; font-weight: 400; color: #616161; margin-bottom: 15px; transition: all ease .5s;}
#article a:hover {color: #000000; transition: all ease .5s;}

.services {list-style-type: none; width: 100%; height: auto; display: table;}
.services li {width: 400px; height: 400px; float: left; margin: 0 40px 40px 0; text-align: center;}
.services li:nth-child(3n) {margin-right: 0px;}
.services li figure {width: 100px; height: 100px; margin: 25px auto;}

.payment-points {list-style-type: none; width: 100%; height: auto; display: table;}
.payment-points li {width: 400px; height: 500px; float: left; margin: 0 25px 25px 0; text-align: center;}
.payment-points li h2 {font-size: 20px!important; font-weight: 700; color: #4b4b4b; margin-bottom: 15px!important; line-height: 20px!important;}
.payment-points li address {font-size: 14px!important; font-weight: 300; color: #4b4b4b; margin-bottom: 15px!important; line-height: 20px!important;}
.payment-points li span {font-size: 14px!important; font-weight: 300; color: #4b4b4b; margin-bottom: 15px!important; line-height: 20px!important;}
.payment-points li address a {font-size: 14px!important; font-weight: 300; color: #4b4b4b; margin-bottom: 15px!important; line-height: 20px!important;}
.payment-points li span a {font-size: 14px!important; font-weight: 300; color: #4b4b4b; margin-bottom: 15px!important; line-height: 20px!important;}
.payment-points li:nth-child(3n) {margin-right: 0px;}
.payment-points li iframe {width: 400px; height: 300px; margin: 25px auto;}

.accordion {background: none; font-size: 20px!important; color: #444; cursor: pointer; padding: 18px; width: 100%; text-align: center; border: none; outline: none; transition: all ease .5s!important;}
.active, .accordion:hover {background-color: #ccc; transition: all ease .5s;}
.panel {padding: 20px; background-color: white; display: none; overflow: hidden; transition: all ease .5s; font-size: 14px; border-bottom: 1px solid #ccc; text-align: center;}
.panel ul {width: 100%; height: auto; margin: 0; padding: 0;}
.panel ul li {padding: 7px 0!important;}
.panel ul li img {height: content-height; float: right; margin: 0 10px 10px 0;}

.tab-buttons {width: 100%; height: 40px; display: flex; margin-bottom: 25px;}
.tab-buttons button {flex: 1; font-size: 16px;}
.tab-buttons button:active, .tab-buttons button:hover {background-color: #ccc; transition: all ease .5s;}
.logolar {width: 100%; height: auto; text-align: center;}

.online-pay {width: 500px; height: auto; margin: auto;}

.online-pay #aboneBilgi ul li label {font-size: 16px; line-height: 24px; margin: 10px 0;}
.online-pay #aboneBilgi ul li input[type=text] {max-width: 500px; width: 500px; height: 40px; border: 1px solid #ccc; border-radius: 10px; margin: 10px 0; padding: 5px;}
.online-pay #aboneBilgi ul li a {max-width: 500px; height: auto; border-radius: 10px; display: block; background: #66e894; color: #ffffff!important; text-align: center; padding: 5px 20px; transition: all ease .5s;}
.online-pay #aboneBilgi ul li a:hover {background: #009936; transition: all ease .5s;}

.online-pay #faturaSorgu ul {width: 100%; display: table;}
.online-pay #faturaSorgu ul li {float: left; font-size: 12px; margin: 5px; padding: 5px!important; line-height: 20px; border-bottom: 1px solid #ccc; height: 30px;}
.online-pay #faturaSorgu ul li:nth-child(1) {width: 50px; text-align: center; border-bottom: 1px solid #ccc;}
.online-pay #faturaSorgu ul li:nth-child(2) {width: 150px; text-align: left; border-bottom: 1px solid #ccc;}
.online-pay #faturaSorgu ul li:nth-child(3) {width: 150px; text-align: left; border-bottom: 1px solid #ccc;}
.online-pay #faturaSorgu ul li:nth-child(4) {width: 100px; text-align: left; border-bottom: 1px solid #ccc;}
.online-pay #faturaSorgu ul li label {font-size: 12px; line-height: 16px; margin: 5px 0;}
.online-pay #faturaSorgu ul li input[type=checkbox] {width: 15px; height: 15px;}
.online-pay #faturaSorgu a {clear: both; max-width: 500px; height: auto; border-radius: 10px; display: block; background: #66e894; color: #ffffff!important; text-align: center; padding: 5px 20px; transition: all ease .5s; margin-top: 25px;}
.online-pay #faturaSorgu a:hover {background: #009936; transition: all ease .5s;}

.online-pay #onlineOdeme ul li label {font-size: 16px; line-height: 24px; margin: 10px 0;}
.online-pay #onlineOdeme ul li input[type=text] {max-width: 500px; width: 500px; height: 40px; border: 1px solid #ccc; border-radius: 10px; margin: 10px 0; padding: 5px;}
.online-pay #onlineOdeme ul li:nth-child(6) input[type=text]:nth-child(1) {width: 48%; height: 40px; border: 1px solid #ccc; border-radius: 10px; margin: 10px 0; float: left;}
.online-pay #onlineOdeme ul li:nth-child(6) input[type=text]:nth-child(2) {width: 48%; height: 40px; border: 1px solid #ccc; border-radius: 10px; margin: 10px 0; float: right;}
.online-pay #onlineOdeme a {clear: both; max-width: 500px; height: auto; border-radius: 10px; display: block; background: #66e894; color: #ffffff!important; text-align: center; padding: 5px 20px; transition: all ease .5s;}
.online-pay #onlineOdeme a:hover {background: #009936; transition: all ease .5s;}

.contact-address {width: 50%; float: left; padding-right: : 30px;}
.contact-map {width: 50%; float: right; padding-right: : 30px;}
.contact-address h2 {font-size: 32px; margin-bottom: 25px;}
.contact-address ul {list-style-type: none!important;}
.contact-address ul li:nth-child(1n) {width:30px; float: left; text-align: center;}
.contact-address ul li:nth-child(2n) {width:600px; float: left; text-align: left;}
.contact-address ul li {font-size: 14px; list-style-type: none!important; line-height: 40px;}
.contact-address ul li i {font-size: 20px; vertical-align: middle; margin-right: 10px;}
.contact-address ul li address {line-height: 24px; font-weight: 300; font-size: 16px; color: #4b4b4b; display: inline;}
.contact-address ul li a {color: #4b4b4b!important;}
.contact-address ul li a:hover {text-decoration: underline;}


        .container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 30px;
            max-width: 1000px;
            margin: 0 auto;
        }
        
        .card {
            flex: 1;
            min-width: 300px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            text-align: center;
            transition: transform 0.3s ease;
        }
        
        .card:hover {
            transform: translateY(-5px);
        }
        
        .card img {
            max-width: 150px;
            height: auto;
            border-radius: 50%;
            margin-bottom: 15px;
            border: 3px solid #e0e0e0;
        }
        
        .card .title {
            font-weight: bold;
            color: #333;
            margin: 10px 0;
            font-size: 18px;
        }
        
        .card .name {
            font-weight: bold;
            color: #2c3e50;
            margin-top: 10px;
            font-size: 20px;
        }
        
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
                align-items: center;
            }
            
            .card {
                width: 80%;
            }
        }