body {
    background-color: #59A6E3;
    display: flex;
    justify-content: center; /* yatay ortala */
    flex-wrap: wrap;         /* taşınca alt satıra geç */
    gap: 20px;               /* kutular arası boşluk */
    padding: 20px;
}


.kutu1{
    border: 5px solid #e35046;
    background-color: #1D87D1;
    width: 600px;
    padding: 20px;
    font-family: Arial, Helvetica, sans-serif;
    box-shadow: 20px 10px 5px #8a160e;
    border-radius: 30px 50px 60px 120px;
    margin: 5px;
    transition: transform 0.3s ease;
}
.kutu1:hover{
    color: #8a160e;
    transform: scale(1.1);
}

.kutu2{
    border: 5px solid #be0da7;
    background-color: #1D87D1;
    width: 600px;
    padding: 20px;
    font-family:'Times New Roman', Times, serif;
    box-shadow: 52px 23px 80px #520942;
    border-radius: 20px 60px 10px 42px;
    margin: 5px;
    transition: transform 0.4s ease;
}
.kutu2:hover{
    color: #be0da7;
    transform: rotate(5deg);
}

.kutu3{
    border: 5px solid #43bb13;
    background-color: #1D87D1;
    width: 600px;
    padding: 20px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-shadow: 5px 5px 20px #034e13;
    border-radius: 100px 50px 60px 50px;
    margin: 5px;
    transition: transform 0.3s ease;
}
.kutu3:hover{
    color: #43bb13;
    transform: translateY(-10px);
}

.kutu4{
    border: 5px solid #2c0ba1;
    background-color: #1D87D1;
    width: 600px;
    padding: 20px;
    font-family:fantasy;
    box-shadow: 20px 40px 50px #0d0142;
    border-radius: 10px 10px 20px 22px;
    margin: 5px;
    transition: background-color 0.3s, box-shadow 0.3s;
}
.kutu4:hover{
    color: #2c0ba1;
    box-shadow: 0 0 20px #d68910;
}

.kutu5{
    border: 5px solid #7705b9;
    background-color: #1D87D1;
    width: 600px;
    padding: 20px;
    font-family:Georgia, 'Times New Roman', Times, serif;
    box-shadow: 50px 10px 5px #34016d;
    border-radius: 50px 200px 10px 12px;
    margin: 5px;
    transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s;
}
.kutu5:hover{
    color: #7705b9;
    transform: scale(1.05) rotate(3deg);
    background-color: #8e44ad;
    box-shadow: 0 0 15px #5e3370;
}

.kutu6{
    border: 5px solid #c59907;
    background-color: #1D87D1;
    width: 600px;
    padding: 20px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    box-shadow: 20px 10px 5px #4b4a03;
    border-radius: 200px 200px 100px 15px;
    margin: 5px;
    transition: all 0.4s ease;
}
.kutu6:hover{
    color: #c59907;
    transform: scale(1.08) translateX(10px) rotate(3deg); /* büyü + kayma + dönme */
    box-shadow: 25px 15px 10px #a83226;
}

img{
    margin: 10px 100px;
    width: 100px;
    border-radius: 50%;
   
}


.baslik{
    font-size: 28px;
    color: darkslategrey;
    text-shadow: 5px 5px 5px gray;
    text-align: center;
    word-spacing: 20px;
}
.yazi{
    font-size: 15px;
    text-indent: 15px;
    text-align: justify;
    letter-spacing: 3px;
}

.kutu1, .kutu2, .kutu3, .kutu4, .kutu5, .kutu6 {
    width: 18%; /* ya da ihtiyaca göre %20 falan */
    min-width: 200px; /* çok küçük olmasını önler */
    box-sizing: border-box; /* padding+border dahil genişlik hesapla */
}