* {

    font-family: 'Source Sans Pro', sans-serif;

    margin: 0;

    padding: 0;

}









body {

    background: var(--private-bg-color);

    height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

}



h1 {

    color: grey;

    text-align: center;

    font-size: 45px;

    margin-bottom: 15px;

}



h2 {

    color: grey;

    text-align: center;

    font-weight: 500;

}



span {

    color: grey;

    text-align: center;

    display: block;

    margin-top: 20px;

}



p {

    font-weight: 300 !important;

    font-size: 20px !important;

}



.info-content .address,

.contact-bar a {

    font-weight: 300 !important;

}



.tooltip {

    position: absolute;

    bottom: 110px;

    left: 370px;

    font-weight: 600;

}



.head {

    background: grey;

    font-family: 'Source Sans Pro', sans-serif;

    font-weight: 200;

    color: #fff;

    font-size: 13px;

    font-weight: bold;

    height: 30px;

    position: relative;

    width: 190px;

    padding: 10px 0px 0px 10px;

}



.head #expandcolors {

    position: absolute;

    margin-top: -2px;

    right: 10px;

    background: none;

    border: none;

    color: white;

    opacity: 0.5;

    transition: 0.5s ease-in-out;

    cursor: pointer;

    -webkit-transform: rotate(45deg);

    -moz-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    -o-transform: rotate(45deg);

    transform: rotate(45deg);

    transition: 0.5s ease-in-out;

}



.head #expandcolors:focus {

    outline: 0;

}



.transform {

    -webkit-transform: rotate(0deg) !important;

    -moz-transform: rotate(0deg) !important;

    -ms-transform: rotate(0deg) !important;

    -o-transform: rotate(0deg) !important;

    transform: rotate(0deg) !important;

    transition: 0.5s ease-in-out;

}



.wrap {

    background: white;

    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);

    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);

    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);

    position: fixed;

    bottom: 0;

    left: 20px;

    max-width: 200px;

}



.colors {

    background: #31364E;

    list-style-type: none;

    margin: 0;

    max-height: 1000px;

    overflow: hidden;

    padding: 5px;

    transition: max-height 0.5s ease-in;

}



.colors li {

    background: none;

    cursor: auto;

    display: inline-block;

    height: 31px;

    margin: 0 -4px 0 0;

    padding: 10px 0;

    text-align: center;

    width: 25%;

}



.colors li:hover .color {

    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45), 0 0 0 2px rgba(205, 205, 205, 0.9);

    transform: scale(1.05);

}



.colors li.selected .color {

    opacity: 0.9;

    position: relative;

    transform: scale(1.25);

}



.colors li.selected .color::after {

    color: azure;

    content: '✓';

    height: 100%;

    left: 0;

    line-height: 34px;

    position: absolute;

    text-indent: 0;

    width: 100%;

}



.colors .color {

    border-radius: 100%;

    cursor: pointer;

    height: 33px;

    margin: 0 auto;

    text-indent: -9999px;

    -webkit-transition: all 0.5s ease;

    transition: all 0.5s ease;

    width: 33px;

}



body * {

    color: var(--private-title-color) !important;

}



.info-content {

    margin-top: 25px;

    text-align: center;

    font-size: 18px;

    font-weight: 500;

}



.info-content .address {

    margin-top: 10px;

    margin-bottom: 20px;

}



a {

    text-decoration: none;

}



.info-content i {

    margin-right: 5px;

}



.info-content span {

    margin: 0px 15px;

    display: unset;

}



.logo img {

    max-width: 450px;

    max-height: 200px;

}



@media(max-width:768px) {

    .logo img {

        width: 80% !important;

    }



    .logo {

        display: flex;

        justify-content: center;

        align-items: center;

    }



    body {

        padding: 0px 15px;

    }



    h1 {

        font-size: 30px;

    }



    h2 {

        font-size: 18px;

    }



    .info-content {

        font-size: 14px;

    }



    .contact-bar {

        display: flex;

        flex-direction: column;

    }

}



.btn.btn-color {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 30px;

    font-family: 'Inter', sans-serif;

    /* Varsa daha modern bir font */

    font-size: 15px;

    font-weight: 600;

    text-decoration: none;

    letter-spacing: 0.5px;

    color: #ffffff !important;

    margin-top: 15px;



    /* Antrasit Gradyan Geçişi */

    background: linear-gradient(145deg, #2c2c2c, #1a1a1a);



    border: 1px solid #3d3d3d;

    /* İnce bir çerçeve derinlik katar */

    border-radius: 8px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

    transition: all 0.3s ease-in-out;

    cursor: pointer;

}



/* Hover (Üzerine Gelince) */

.btn.btn-color:hover {

    background: #111111;

    /* Tam siyah derinlik */

    border-color: #555555;

    /* Çerçevenin hafif aydınlanması */

    transform: translateY(-2px);

    /* Yukarı esneme */

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);

}



/* Tıklama Anı */

.btn.btn-color:active {

    transform: translateY(0);

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);

}



/* Hafif bir ışık yansıması efekti */

.btn.btn-color::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 50%;

    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), transparent);

    pointer-events: none;

}