*{
    box-sizing:border-box
}

body{
    margin:0;
    font-family:Arial,sans-serif;
    background:#f4f6f8;
    color:#222
}

.container{
    width:94%;
    max-width:1100px;
    margin:auto
}

.site-header{
    background:#111827;
    padding:10px 0
}

/* LOGO */
.logo{
    display:inline-flex;
    align-items:center;
    text-decoration:none;
    vertical-align:middle;
    line-height:0;
}

.logo img{
    display:block;
    width:180px;
    height:auto;
    max-height:55px;
    object-fit:contain;
}

/* MENÜ */
.site-header nav{
    float:right;
    margin-top:14px
}

.site-header nav a{
    color:#fff;
    text-decoration:none;
    margin-left:18px
}

main.container{
    padding:30px 0
}

.card{
    background:#fff;
    border-radius:10px;
    padding:20px;
    margin-bottom:15px;
    box-shadow:0 2px 10px rgba(0,0,0,.05)
}

a{
    color:#2563eb
}

input,textarea{
    width:100%;
    padding:12px;
    margin:7px 0 15px;
    border:1px solid #ddd;
    border-radius:7px
}

button,.btn{
    display:inline-block;
    background:#2563eb;
    color:#fff;
    border:0;
    padding:11px 18px;
    border-radius:7px;
    text-decoration:none;
    cursor:pointer
}

.error{
    color:#b91c1c
}

.success{
    color:#15803d
}

.site-footer{
    margin-top:40px;
    padding:25px 0;
    background:#111827;
    color:#fff;
    text-align:center
}

/* MOBİL */
@media(max-width:700px){

    .site-header{
        padding:8px 0 10px
    }

    .logo img{
        width:150px;
        height:auto;
        max-height:45px
    }

    .site-header nav{
        float:none;
        margin-top:10px
    }

    .site-header nav a{
        margin:0 12px 0 0
    }

    main.container{
        padding:30px 0
    }

/* KONU FOTOĞRAFLARI */

.topic-images{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:20px;
}

.topic-images a{
    display:block;
    width:calc(33.333% - 8px);
}

.topic-images img{
    display:block;
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:10px;
    cursor:pointer;
}

@media(max-width:700px){

    .topic-images{
        display:flex;
        flex-direction:column;
        gap:12px;
    }

    .topic-images a{
        width:100%;
    }

    .topic-images img{
        width:100%;
        height:auto;
        max-height:500px;
        object-fit:contain;
        background:#f4f6f8;
    }
}