body{

    background: linear-gradient(155deg, rgba(0, 0, 0, 0.5), rgba(150, 136, 74, 0.5), rgba(255, 255, 255, 0.5)),url("bg.jpg");
    background-size: cover;
    background-position: center;
    font-size: 18px;
    color: rgb(46, 46, 46);
}
main{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
h1,h2,h3,h4{
    font-family:Cambria, 'Times New Roman';
}
h1{
    font-size: 3em;
}
h4{
    font-size: 0.85em;
}
ul{
    text-decoration: none;
    list-style-type: none;
    padding-left: 2em;
}
.kart{
    border-radius: 1em;
    width: 35vw;
    display: grid;
    grid-template-columns: 35% 65%;
    overflow: hidden;
    background: linear-gradient(155deg, rgb(230, 209, 20), rgb(11, 226, 241));
    box-shadow: 0 1px 20px rgba(255, 255, 255, 0.5);
}
.kartsol{
    padding: 3em 2em 3em 2em;
}
.pp{
    overflow: hidden;
    border-radius: 1em;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
}
.pp img{
    width: 100%;
    height: auto;
    display: block;
}
.kartsag{
    padding: 2em 2em 4em 1em;
}
.kartsag-list{
    background-color: white;
    border-radius: 1em;
    height:100%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}
.kartsag-list{
    position: relative;
}
.kartsag-list li{
    position: absolute;
}
.kartsag-list li:nth-child(1){
    top: 0em;
}
.kartsag-list li:nth-child(2){
    top: 5em
}
.kartsag-list li:nth-last-child(1){
    top: 14em;
    right: 1em;
}
/*-----------------------------------------Responsive-------------------------------------------*/
@media only screen and (max-width: 2300px) {
    .kart{ width: 40vw;}  
    body{ font-size: 16px;}
}
@media only screen and (max-width: 1920px) {
    .kart{ width: 48vw;}    
}
@media only screen and (max-width: 1800px) {
    body{ font-size: 15px;}    
}
@media only screen and (max-width: 1600px) {
    body{ font-size: 14px;}    
}
@media only screen and (max-width: 1376px) {
    body{font-size: 15px; background: linear-gradient(155deg, rgba(0, 0, 0, 0.5), rgba(150, 136, 74, 0.5), rgba(255, 255, 255, 0.5)),url("bg02.jpg"); background-size: cover;} 
    .kart{ width: 60vw;}   
}
@media only screen and (max-width: 1080px) {
    body{font-size: 15px; background: linear-gradient(155deg, rgba(0, 0, 0, 0.5), rgba(150, 136, 74, 0.5), rgba(255, 255, 255, 0.5)),url("bg03.jpg"); background-size: cover;} 
    .kart{ width: 80vw;}
}
@media only screen and (max-width: 1080px) {
    body{font-size: 14px; background: linear-gradient(155deg, rgba(0, 0, 0, 0.5), rgba(150, 136, 74, 0.5), rgba(255, 255, 255, 0.5)),url("bg03.jpg"); background-size: cover;} 
    .kart{ width: 80vw;}
}
@media only screen and (max-width: 720px) {
    body{font-size: 12px; background: linear-gradient(155deg, rgba(0, 0, 0, 0.5), rgba(150, 136, 74, 0.5), rgba(255, 255, 255, 0.5)),url("bg03.jpg"); background-size: cover;} 
    .kart{ width: 85vw;}
}
@media only screen and (max-width: 640px) {
    body{font-size: 9px; background: linear-gradient(155deg, rgba(0, 0, 0, 0.5), rgba(150, 136, 74, 0.5), rgba(255, 255, 255, 0.5)),url("bg03.jpg"); background-size: cover;} 
    .kart{ width: 90vw;}
    .kartsag-list li:nth-last-child(1){ top: 12em;}
}
@media only screen and (max-width: 480px) {
    body{font-size: 8px;}
    .kart{ width: 95vw;}

}
@media only screen and (max-width: 360px) {
    body{font-size: 7px;}
    .kart{ width: 95vw;}
    .kartsag-list li:nth-last-child(1){ top: 12em;}
}

/*-----------------------------------Ben yazmadım----------------------------------*/

.icon {
    display: inline-block;
    width: 2em; /* Icon genişliği */
    height: 2em; /* Icon yüksekliği */
    margin: 0 0.5em; /* Iconlar arası boşluk */
    background-size: cover;
}

.x {
    background-image: url('x.png'); /* Twitter iconu */
}

.instagram {
    background-image: url('ins.png'); /* Instagram iconu */
}
.dc {
    background-image: url('dc.png'); /* Instagram iconu */
}