:root{--gray: #f0f0f0;--red: #e40000;--orange: #8b89a1;--black: #2c2c2c;--amavi:#162e54;--beyaz:#FFFFFF}
*{box-sizing:border-box}
body{margin:0;padding:0;background-color:var(--orange)}a{color:inherit;text-decoration:none}
.turkey-map-wrapper{display:flex;width:100vw;max-width:100%;min-height:100vh;padding:20px;align-items:center;justify-content:center;flex-direction:column}
.turkey-map{max-width:100%;margin:auto}
.turkey-map svg{display:block;max-width:100%;height:auto}
.turkey-map svg g[data-plate]{cursor:pointer}
.turkey-map svg g[data-plate]>path{transition:all .2s linear}
.turkey-map svg g[data-plate]:hover>path,.turkey-map svg g[data-plate].active>path{fill:var(--gray)}
.title{width:100%;max-width:700px;margin:0 auto 2rem;padding-bottom:1rem;text-align:center;border-bottom:1px solid rgba(0,0,0,.1)}
.copyright{width:100%;max-width:700px;margin:2rem auto 0;padding-top:1rem;text-align:center;border-top:1px solid rgba(0,0,0,.1)}


/* Özel illerin alan (path) için normal durum rengi */
.special-province path {
    fill: #162e54 !important;
}

/* Özel illerin alanı için hover durum rengi */
.special-province:hover path {
    fill: #dbdae4 !important;
}

/* Özel illerin metin (eğer SVG'de <text> veya metin içeren path kullanılıyorsa) için normal renk */
.special-province text,
.special-province path[fill="#444444"] {
    fill: #FFFFFF !important;
}

/* Özel illerin metni için hover durum rengi */
.special-province:hover text,
.special-province:hover path[fill="#444444"] {
    fill: #FFFFFF !important;
}