body {
    margin: 0;
    padding: 0;
    background-color: #fff; /* Arkaplan rengi */
    text-align: center;
    font-family: Arial, sans-serif;
}

header {
	width:100%;
	background:#ff06d3;
	padding:30px 0;
}
header h1{color:#fff;font-style:uppercase;font-size:55px;margin:0px;}
header h2{color:#000;font-style:uppercase;font-size:25px;margin:10px 0 0 0;}

.container {
    position: relative;
    max-width: 100%;
}

img {
    width: 250px;
	margin:30px 0 0 0;
	border-radius:10px;
	border-style: solid; border-width: 5px;
}
#caption{margin:25px 0; font-size:45px;text-transform:capitalize;}
.controls {
    margin-top: 10px;
}

button {
    background-color: #af0090; /* Düğme rengi */
    color: white;
	font-size:20px;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #ff9900; /* Üzerine gelindiğinde düğme rengi */
}


/* Tam ekran butonunun stilini ayarlayın */
.fullscreen-button {
    position: absolute;
    top: 10px; /* Sağ üst köşe'den 10 piksel aşağıda */
    right: 10px; /* Sağ üst köşe'den 10 piksel solda */
    width: 40px;
    height: 40px;
    background-image: url('tamekran.png'); /* Tam ekran simgesi resmi */
    background-size: cover;
    cursor: pointer;
}


.menu-icon {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 40px;
    height: 40px;
    background-image: url('menu-icon.png');
    background-size: cover;
    cursor: pointer;
    z-index: 2;
}

.mobile-menu {
    position: fixed;
    top: 0;
    left: -250px; /* Menü başlangıçta gizli */
    width: 250px;
    height: 100%;
    background: #26c281; /* Menü arka plan rengi */
    transition: left 0.3s; /* Geçiş efekti */
    z-index: 1;
}

.mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-top: 20px;
}

.mobile-menu ul li {
    text-align: left;
    margin-bottom: 20px;
margin-left:75px;
}

.mobile-menu ul li a {
    color: #fff; /* Menü bağlantı renkleri */
    text-decoration: none;
    font-size: 18px;
}

.alan{float:left;padding:2% 2%;width:96%; }
.course-box {
	float:left;
    background-color: #26c281;
    color: #fff;
    margin: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.course-box a{text-decoration:none;color:#fff;padding:50px; font-size: 20px;}
.course-box:hover{background-color: #179f66;}




@media only screen and (max-width: 600px) {
header{padding:10px 0;}
header h1{color:#fff;font-size:30px;margin:20px 0 0 0;}
header h2{color:#000;font-size:20px;margin:10px 0 0 0;}
.course-box {width:95%;}
.course-box a{width:100%;padding:40px;}
 button{margin:10px 0 0 0;}
 
.menu-icon {width:20px;height:20px;} 
.fullscreen-button {width:20px;height:20px;} 
 
 
}