@import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@400;500;600;700;800;900&display=swap');

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0}
ol,ul,li{list-style:none;}
blockquote,q{quotes:none;}
html{height:100%;}
:root {
--color-dark: #1d1d1f;
--color-dark-soft: #6e6e73;
--color-light: #f5f5f7;
--color-light-soft: #e8e8ed;

--color-white: #ffffff;
--color-black: #000000;
--color-blue: #007aff;
--color-blue-soft: #66A3FF;
--color-blue-dark: #0059B3;
--color-orange: #FF7F00;
--color-orange-soft: #FFB366 ;
--color-orange-dark: #CC6600 ;
--radius:18px;
}


body{height:100%; background:#f5f5f7; color:#6e6d6a; font-weight: 400; font-style: normal; font-size:16px; font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; -webkit-font-smoothing: antialiased;}
.blur{border-radius: 0.75rem !important; backdrop-filter: blur(16px)!important; background-color: rgb(255 255 255 / .6) !important;}
.shadow{background: #fff; box-shadow: 0 0 0 1px #dce1e6; border-radius: var(--radius);}

a{color:#282828; text-decoration:none;}
a:hover{color:var(--color-blue); text-decoration:none;}
.radius3{border-radius:3px;}
.radius5{border-radius:5px;}
.radius8{border-radius:8px;}
.radius10{border-radius:10px;}
.circle{border-radius:50%;}
.transition{transition:all 0.4s;}
.borderbox{box-sizing:border-box;}
.cover{background-size: cover; background-position: center;}
.height10{width: 100%; height: 10px; display: flex;}
.height30{width: 100%; height: 30px; display: flex;}
.height50{width: 100%; height: 50px; display: flex;}

/* Not: pagetitle sınıfının iki farklı tanımı vardı, burada sadece ana kullanımını bırakıyorum. */
.pagetitle{width:100%; height:50px; display:flex; justify-content:flex-start; align-items: center; font-size:2rem; font-weight: 500; color:var(--color-dark-soft);}


.breadcrumb{width:80%; padding:30px 10%; margin-bottom: 30px; background-color:rgba(255, 255, 255, 0.5); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dotted #ccc;}
.breadcrumb h2{width:auto; font-size:1.5em; font-weight:500; color: var(--color-blue); order:2;}
.breadcrumb ul{width:auto; display: flex; order:1;}
.breadcrumb ul li{width:auto; font-size:1em; padding:0 6px;}
.breadcrumb ul li a{color:var(--color-dark);}

.top{width:80%; height: 50px; background-color:#0c54a0; color: var(--color-white); padding:0 10%; font-size:1.1em; display: flex; justify-content: space-between; align-items: center;}
.top a{color:#fff;}

.stickheader{position: fixed!important; top: 0; z-index:999999; backdrop-filter: blur(16px)!important; background-color: rgb(255 255 255 / .6) !important;}
header{width:80%; height:90px; padding:0px 10%; display:flex; background:var(--color-white);
border-top: 1px solid #ebebeb; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1); justify-content:space-between; align-items:center;}
header figure{height:auto; display:flex;}
header figure img{height:80px;}

.headerataturk {width:auto; height:70px; display:flex;}
.headerataturk img {width:auto; height:auto; display:flex;}

.toggle,[id^=drop] {display:none;}
nav {width:auto; height:50px; z-index:2; display:flex;}
nav:after{content:""; display:table; clear:both;} /* Bu kuralın Flexbox nedeniyle gereksiz olma ihtimali var */
nav ul{display: flex; position:relative;}
nav ul li{display: flex; line-height: 50px;}
nav ul li a{display:block; font-weight: 500; padding:0 8px;}
nav ul li:Hover a{color:var(--color-blue);}


nav ul ul{display:none; position:absolute; top:50px; padding:16px;}
nav ul li:hover > ul{display:flex; flex-direction: column; overflow:hidden; background: #fff; box-shadow: 0 0 0 1px #dce1e6; border-radius: var(--radius);}
nav ul li ul li{width:100%; border-bottom:1px dotted #d1d1d1; line-height:40px; width:250px; position:relative;}
nav ul li ul li:last-child{border-bottom:none;}
nav ul li ul li a{color:var(--color-black)!important; background:var(--color-white)!important; }
nav ul li ul li a:hover{color:var(--color-blue)!important; background:var(--color-white)!important;}

/*Manset*/
.manset{width:80%; margin:0px 0%; padding:30px 10%; display:flex; justify-content: space-between;}
.mansetsol{width:64%; padding:0%; display:flex; flex-direction: column; background:none;}
ul.linkler{height:auto; display:grid; justify-content:center; flex-wrap: wrap; grid-template-columns: repeat(auto-fit, minmax(20%, 1fr)); gap:6px;}
ul.linkler li{display: flex; flex-direction: column; align-items: center; justify-content: center; padding:24px; color: #6e6d6a; cursor: pointer; border-radius: 12px; transition: all 0.3s ease; text-decoration: none; background-color:rgba(229 231 235); border:1px solid rgb(209 213 219);}
ul.linkler li:Hover{color:#000;}
ul.linkler li figure{width:100%; display:flex; justify-content: center; align-items: center; margin-bottom: 10px;}
ul.linkler li figure img{width:48px;}
ul.linkler li h3{width:100%; height:30px; display:flex; justify-content: center; align-items: center; font-size: 1em; font-weight: 500; text-align: center;}
ul.linkler li p{width:100%; height:30px; display:flex; margin: 0; justify-content: center; align-items: center; font-size:.96em; font-weight:300; text-align: center;}
.mansetsag {display: block; width:30%; flex-shrink: 0; background: url('../images/mg.png') #b9c7d2; background-size: cover; background-position: center; position: relative; text-decoration: none; color: white; border-radius: 8px; overflow: hidden; cursor: pointer;}
.mansetsag .overlay {position: absolute; bottom: 0; width: 100%; padding: 12px; background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);}
.mansetsag h3 {margin: 0; font-size: 25px; font-weight: bold;}
.mansetsag p {margin: 4px 0 0; font-size: 17px;}

/*Detay*/
.pages {display: flex; width: 80%; margin:30px 10%; max-width: 1200px; background-color: #ffffff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); overflow: hidden; flex-direction: row;}
.sidebar {width: 300px; background-color: #fbfbfd; border-right: 1px solid #e2e2e6; padding: 25px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; flex-shrink: 0;}
.sidebar img {width: 100%; max-width: 200px; height: auto; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);}
.sidebar figcaption {font-size: 1.3em; font-weight: 500; margin-bottom: 25px; color: #333;}
.sidebar ul {list-style: none; padding: 0; margin: 0; width: 100%;}
.sidebar ul li {padding: 12px 15px; cursor: pointer; font-size: 1.1em; border-radius: 8px; margin-bottom: 5px; transition: background-color 0.2s ease, color 0.2s ease; text-align: left;}
.sidebar ul li:hover {background-color: #e0e0e0;}
.sidebar ul li.active {background-color: #007aff; color: white; font-weight: 500;}
.sidebar ul li.active a {color: white;}
main.detail {flex-grow: 1; padding: 40px; display: flex; flex-direction: column; align-items: flex-start; text-align: left;}
main.detail h1 {font-size: 2.5em;  font-weight: 600; margin-top: 0; margin-bottom: 20px; color: #1d1d1f;}
main.detail img {width: 100%; max-width: 600px; height: auto; border-radius: 10px; margin-bottom: 30px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);}
main.detail p {font-size: 1.2em; line-height: 1.6; margin-bottom: 15px; color: #333;}
main.detail blockquote {font-size: 1.1em; line-height: 1.6; margin-bottom: 15px; color: #333;}
main.detail blockquote {background-color: #f9fafb; border-left: 4px solid var(--color-orange); padding: 1.5rem; margin: 2rem 0; font-size: 1.125rem; line-height: 1.6; color: #374151; font-style: italic; border-radius: 0.25rem;}

/*Kisiler*/
ul.kisiler {display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; padding: 0; margin:0px auto; list-style: none;}
ul.kisiler li.shadow {background: #ffffffcc; backdrop-filter: blur(12px); border-radius: 28px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); overflow: hidden; transition: all 0.4s ease; text-align: center; width: 260px; padding-bottom: 20px; border: 1px solid #e5e5e5;}
ul.kisiler li.shadow:hover {transform: scale(1.03); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);}
ul.kisiler li figure {margin: 0; position: relative; height: 320px; background: #f1f1f1;}
ul.kisiler li figure img {width: 100%; height: 100%; object-fit: cover; display: block;}
ul.kisiler li h3 {font-size: 1.2rem; margin: 15px 0 5px; color: #111; font-weight: 600;}
ul.kisiler li p {font-size: 0.95rem; color: #444; margin: 0; font-weight: 400;}



/*Haberler*/
.haberler {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; max-width: 1200px; margin:30px auto;}
.haber {background: rgba(255, 255, 255, 0.95); border-radius: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06), 0 12px 30px rgba(0, 0, 0, 0.1); overflow: hidden; transition: transform 0.35s ease, box-shadow 0.35s ease; display: flex;flex-direction: column; cursor: pointer;}
.haber:hover {transform: translateY(-5px) scale(1.03); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);}
.haber img {width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-top-left-radius: 20px; border-top-right-radius: 20px; transition: transform 0.5s ease;}
.haber:hover img {transform: scale(1.06);}
.haber-content {padding: 1.6rem 1.5rem 2rem;}
.haber-content h3 {font-weight: 800;font-size: 1.4rem;margin-bottom: 0.5rem;}
.haber-content p {font-size: 1rem;color: #444;line-height: 1.5;}

.haberdetay {width: 70%; margin:30px 10%; padding:5%; display: flex; flex-direction: column; background-color: #ffffff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); overflow: hidden;}
.haberdetay .habertitle{width:100%; display: flex; font-size: 1.9em; font-weight: 500; margin-bottom: 30px; color: var(--color-blue);}
.haberdetay article{width:100%; display: flex; margin:30px 0; color:#999;}
.haberdetay detail{width:100%; font-size:1.3em; color:var(--color-dark); font-weight: 400;}
.haberdetay detail strong{font-weight:600;}

ul.habergalerisi{width:100%; display:flex; flex-wrap: wrap; justify-content:space-around; margin:10px 0;}
ul.habergalerisi li{width:14%; padding:1%; margin-bottom:10px; display:flex; flex-direction: column;}
ul.habergalerisi li figure{width:100%; display:flex;}
ul.habergalerisi li figure img{width:100%; height: auto; display:flex;}

.duyurular {max-width:70%; margin: 0 auto;}
.duyurular h2 {color: #333; text-align: center; margin-bottom: 20px;}
.duyurular ul {list-style-type: none; padding: 0; margin: 0;}
.duyurular ul li {background-color: #f9f9f9; margin-bottom: 10px; padding: 15px; border-left: 4px solid #007BFF; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); transition: background-color 0.3s ease;}
.duyurular ul li:hover {background-color: #f1f1f1;}
.duyurular ul li strong {display: block; color: #007BFF; margin-bottom: 5px;}



.box {width:80%; margin:30px 10%; display:flex; flex-direction: column;}
.box ul{width:100%; margin:0px 0%; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:30px;}
.box ul li{padding:10%; display:flex; flex-direction: column; cursor: pointer; background-color:var(--color-white); background: rgba(255, 255, 255, 0.95); border-radius:8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06), 0 12px 30px rgba(0, 0, 0, 0.1); overflow: hidden; transition: transform 0.35s ease, box-shadow 0.35s ease;}
.box ul li figure{width:100%; display:flex; margin-bottom:14px;}
.box ul li figure img{width:100%; height: auto; display:flex; border-radius:8px;}
.box ul li:Hover figure img{transform: scale(1.03);}
.box ul li h3{width:100%; height:30px; display:flex; justify-content: center; align-items: center; font-size: 1em; font-weight: 500; text-align: center;}
.box ul li:Hover h3{color:var(--color-blue);}
.box ul li p{width:100%; height:30px; display:flex; margin: 0; justify-content: center; align-items: center; font-size:.96em; font-weight:300; text-align: center;}


/*Meclis Kararlari*/
ul.karar-listesi {max-width: 800px; margin: auto; padding: 0; list-style: none;}
ul.karar-listesi li {background: #fff; border-radius: 12px; padding: 20px; margin-bottom: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); transition: all 0.2s ease; display: flex; justify-content: space-between; align-items: center;}
ul.karar-listesi li:hover {transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.1);}
.karar-icerik {flex: 1;}
.karar-baslik {font-size: 18px; font-weight: bold; color: #000;}
.karar-tarih {font-size: 14px; color: #666; margin-top: 6px;}
.karar-download {font-size: 28px; color: #007bff; text-decoration: none; margin-left: 15px; transition: color 0.2s ease;}
.karar-download:hover {color: #0056b3;}


.mahalleler{width:80%; display:flex; margin:30px 10%; flex-direction: column;}
.mahalleler h2{width:100%; height:50px; display:flex; justify-content:flex-start; align-items: center; font-size:2.2em; font-weight: 500; color:#6e6d6a;}
.mahalleler ul{width:100%; margin: 30px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:30px;}
.mahalleler ul li{padding:2%; margin-bottom: 30px; display:flex; flex-direction: column;}
.mahalleler ul li h3{width:100%; height:30px; display:flex; justify-content: center; align-items: center; font-size: 1em; font-weight: 500; text-align: center;}
.mahalleler ul li h4{width:100%; height:30px; display:flex; margin: 0; justify-content: center; align-items: center; font-size:.86em; font-weight:300; text-align: center;}
.mahalleler ul li p{width:100%; height:30px; display:flex; margin: 0; justify-content: center; align-items: center; font-size:.96em; font-weight:300; text-align: center;}


.baskan {background: #fff; border-radius: 16px; width: 70%; margin:30px auto; box-shadow: 0 12px 24px rgba(0,0,0,0.15); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.3s ease;}
.baskan:hover {box-shadow: 0 20px 40px rgba(0,0,0,0.2);}
.foto {width: 100%; height: 320px; background: url('../images/mustafaguzel.jpg') center/cover no-repeat; border-bottom: 1px solid #e0e0e0;}
.icerik {padding: 24px 32px; display: flex; flex-direction: column; gap: 1rem; align-items: center;}
.baskan h1 {font-weight: 700; font-size: 2.25rem; letter-spacing: -0.02em; color: #d50000;}
.baskan h2 {width:100%; font-weight: 400; font-size: 1.25rem; color: #666; text-align: left;}
.baskan h3 {font-weight: 400; font-size: 1.5rem; color: #666; }
.baskan p {width:100%; line-height:1.2; font-size: 1rem; color: #444; text-align: left;}
.baskan .social { margin-top: 1.5rem; display: flex; gap: 24px; }
.baskan .social a {display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #f0f0f5; color: #333; font-size: 20px; transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease; text-decoration: none;}
.baskan .social a:hover {background-color: #007aff; color: white; transform: scale(1.15);}


.iletisim{width:80%; display:flex; margin:30px 10%; flex-direction: column;}
.iletisim h2{width:100%; height:50px; display:flex; justify-content:flex-start; align-items: center; font-size:2.2em; font-weight: 500; color:#6e6d6a;}
.iletisim ul{width:100%; display:flex; flex-wrap: wrap; justify-content: space-between; margin: 30px 0;}
.iletisim ul li{width:20%; padding:0 2% 2% 2%; margin-bottom:30px; display:flex; flex-direction: column;}
.iletisim ul li span{width:100%; height:70px; display:flex; border-bottom: 1px solid #e6e8eb; margin-bottom:30px; justify-content: center; align-items: center; font-size: 1em; font-weight: 500; text-align: center;}
.iletisim ul li a{width:100%; height:30px; display:flex; justify-content: center; align-items: center; font-size: 1em; font-weight: 500; text-align: center;}
.iletisim ul li p{width:100%; height:30px; display:flex; margin: 0; justify-content: center; align-items: center; font-size:.96em; font-weight:300; text-align: center;}



footer{width:80%; padding:10px 10%; min-height:200px; background: #f4f4f4; border-top: 3px solid var(--color-light-soft);
    display: flex; flex-direction: column; justify-content: center; align-items: center;}
footer h1{margin-bottom: 20px;}
footer ul{display:flex; justify-content: space-between; align-content:center; margin-bottom: 30px;}
footer ul li{width:auto; display:flex; margin:0 12px; flex-direction:column; justify-content:center; align-content:center; text-align:center;}
footer ul li a{color:var(--color-black); font-weight:500;}
footer ul li a:Hover{color:var(--color-black);}
footer ul li i{font-size:1.2em!important;}

@media all and (max-width:980px) {


.breadcrumb{width:90%; padding:10px 5%; flex-direction: column; align-items: flex-start;}
.breadcrumb h2{width:auto; order:1;}
.breadcrumb ul{width:auto; display: flex; order:2;}
.breadcrumb ul li{padding:0 8px 0 0px;}


.top{width:90%; padding:0 5%; font-size:1em;}

.stickheader{position:inherit !important; top: 0; z-index:999999; backdrop-filter: blur(0px)!important; background-color: rgb(255 255 255 / 1) !important;}
header{width:100%; height:auto; padding:0px 0%; flex-wrap: wrap;}
header figure{height:46%; display:flex; order:1; padding:0 2%;}
header figure img{height:70px;}
.headerataturk {width:40%; height:50px; display:flex; justify-content: flex-end; order:2; padding:0 2%;}
.headerataturk img {width:auto; height:50px; display:flex;}

nav {width:100%; height:auto; z-index:1; order:3; position: relative; display: flex; flex-direction: column;}
.toggle + a,.menu {display: none;}
.toggle {display: block; padding:9px 20px; color:#FFF; text-decoration:none; border:none; background:var(--color-orange);}
[id^=drop]:checked + ul {display:block;}
nav ul{width:96%; padding:2%; flex-direction: column; background:var(--color-white);}
nav ul a{background:#ebebeb!important;}
nav ul li {display: block; margin-bottom:1px; line-height:44px;}
nav ul li a{background:#ebebeb!important; padding:0 8px;}
nav ul li ul li {width: 100%; line-height: 38px;}
nav ul li .toggle{padding: 0 8px; color:#000; background-color:#ebebeb!important;}
nav a:hover,nav ul ul ul a {background-color: #000000;}
nav ul li ul li .toggle,nav ul ul a,nav ul ul ul a{color:#FFF;}
nav ul li ul li .toggle,nav ul ul a {background-color: #212121;}
nav ul ul {float: none; position:static; color: #ffffff;}
nav ul li:hover > ul{display:flex; flex-direction: column; overflow:hidden; background: #fff; box-shadow: 0 0 0 0px #dce1e6;}
nav ul ul li:hover > ul,nav ul li:hover > ul {display: none;}

/*Pages*/
.pages {width: 100%; margin:0 0; border-radius: 0; box-shadow: none; padding: 0; flex-direction: column;}
.sidebar {width: 100%; border-right: none; border-bottom: 1px solid #e2e2e6; padding: 15px 20px;}
.district-list-container figcaption {font-size: 1.2em; margin-bottom: 15px;}
.sidebar img {max-width: 150px; margin-bottom: 15px;}
.sidebar ul{display: flex; overflow-x: auto; white-space: nowrap; padding-bottom: 10px;}
.sidebar ul li {flex-shrink: 0; margin-right: 10px; padding: 8px 12px; font-size: 1em; display: inline-block;}
main.detail {padding:20px;}
main.detail h1 {font-size:2em; margin-bottom:15px;}
main.detail img {margin-bottom:20px;}
main.detail p {font-size:1em;}

/*manset*/
.manset{width:100%; padding:30px 0%; display:flex; flex-direction: column;}
.mansetsol{width:96%; padding:2%;}
.mansetsag{width:96%; min-height:300px; padding:0%; margin:10px 2%;}
ul.linkler{height:auto; display:grid; justify-content:center; flex-wrap: wrap; grid-template-columns: repeat(auto-fit, minmax(40%, 1fr)); gap:6px;}

/*projeler*/


ul.karar-listesi li {padding: 15px; flex-direction: column; align-items: flex-start;}
.karar-download {margin-top: 10px;}
.karar-baslik {font-size: 16px;}
.karar-tarih {font-size: 13px;}


.baskan {width: 100%; border-radius: 12px;}
.baskan .foto {height: 240px;}
.baskan .icerik {padding: 20px 20px;}
.baskan h1 {font-size: 1.8rem;}
.baskan h2 {font-size: 1.1rem;}

ul.kisiler {gap: 15px;}
/* ul.kisiler li.shadow {width: 45%;} Bu kural kaldırıldı, alttaki zaten yüzde 100 yapıyor*/
ul.kisiler li.shadow {width: 100%;}

.iletisim{width:90%; margin:30px 5%;}
.iletisim ul li{width:94%; padding:0 2% 2% 2%; margin-bottom:30px;}



}


@media (min-width:981px) {
#nav{display:block!important;}
}

/* Boş medya sorgusu bloğu kaldırıldı */