@import url('https://fonts.googleapis.com/css?family=Montserrat:500');

/*Copyright by Haxtar Soliterax 2015 - 2022*/



.Center_Workspace {
	cursor: default;
	padding: 0px;
	margin: 20px 20px 20px 20px;
	list-style: none;
	cursor: default;
	background-color: transparent;
}





.container {
    display: grid;
    grid-auto-flow: column; /* Elemanları yatayda sıralamak için */
    /*grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));*/
    grid-template-columns: repeat(8, 200px);
    gap: 15px;
    overflow-x: auto; /* Yatay kaydırma */
    white-space: nowrap; /* Satır atlamayı önle */
    /*width: 80vw; Görünen alan */
    border: 2px solid black;
    scrollbar-width: thin;
    scroll-behavior: smooth;
    scrollbar-color: darkgray transparent;
    -webkit-overflow-scrolling: touch;
}



.box {
            width: 200px;
            height: 300px;
            border: 2px solid black;
            border-radius: 10px;
            overflow: hidden; /* Görsel taşmasını engelle */
            text-align: center;
            display: flex;
            flex-direction: column;
            /*justify-content: space-between;  İçerikleri düzenle */
            background-color: #f0f0f0;
            flex: 1;
        }

        .box a {
            text-decoration: none; /* Linkin alt çizgisini kaldır */
            color: black;
            display: block; /* Kutunun tamamını tıklanabilir yap */
            width: 100%;
            height: 100%;
        }

        .box img {
            width: 100%;
            height: 90%; /* Görselin büyük alan kaplamasını sağla */
            object-fit: cover; /* Görselin kutuya uyumlu hale gelmesini sağla */
        }

        .box p {
            font-size: 18px;
            font-weight: bold;
            color: white;
        }


/*Info Column*/

div#Info {
	cursor: default;
	top: 0px;
	right: 0px;
	left: 0px;
	display: relative;
	justify-content: space-between;
	align-items: center;
	padding: 20px 20px;
	background-color: #1c1c1c;
	position: relative;
	height: 160px;
	max-height: 400px;
}

#Image{
	cursor: pointer;
	width: 100px;
	height: 100px;
}

#Blog{
	cursor: pointer;
	position: absolute;
	left: 20px;
}
#Program{
	cursor: pointer;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
#View{
	cursor: pointer;
	position: absolute;
	right: 20px;
}

#Blog:hover{
	cursor: pointer;
	background-color: #0088a9;
}

#Program:hover{
	cursor: pointer;
	background-color: #0088a9;
}

#View:hover{
	cursor: pointer;
	background-color: #0088a9;
}

#Text{cursor: pointer;background-color: transparent;}

div p#Text{
	cursor: pointer;
	position: absolute;
	top: 30%;
	left: 25%;
}

/*Announcement Column*/

div#Announcement{
	cursor: default;
	background-color: #1c1c1c;
	up: 0px;
	left: 0px;
	right: 0px;
	display: list-item;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	margin: 0px 50px 0px 0px;

}

div#Announcement div#News{
	margin-top: 5px;
	margin-bottom: 5px;
	border-width: 5px;
	border-style: initial;
	border-color: white;
	position: relative;
	background-color: transparent;
	display: list-item;
	padding: 5px 5px 5px 5px;
}

div#Announcement div#News h3#Header{
	cursor: default;
	background-color: #1c1c1c;
	border-style: initial;
	border-radius: 40px;
	width: 400px;
	text-decoration: none;
	margin: 5px 0px 5px 0px;
	color: white;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	box-shadow: 0px 5px 2px black;
	text-align: center;
	padding: 10px;
	border-width: 2px;
	border-color: black;

}

div#Announcement div#News p#News_Tag {
	cursor: default;
	color: white;
	text-align: center;
	font-size: 12px;
	border-style: solid;
	background-color: #001a9b;
	border-width: 0px;
	position: absolute;
	top: 20px;
	left: 20px;
	width: 120px;
	height: 15px;
}

div#Announcement div#News p#Description {
	color: white;
	text-align: center;
	text-anchor: middle;
	font-size: 20px;
	padding: 5px 15px;
	border-color: #212121;
	border-style: solid;
	border-radius: 10px;
	background-color: transparent;
	margin: 5px 25px 10px 25px;
}

@media (max-width: 768px) {
    
    .box img {
        width: 50%; /* Görseli küçült */
        max-height: 250px; /* Maksimum yükseklik sınırı */
        display: block;
        margin: 0 auto; /* Ortala */
    }

    .box p {
        font-size: 10px; /* Yazı boyutunu biraz artır */
        margin-top: 5px; /* Yazı ile görsel arasına boşluk bırak */
    }

}

@media (max-width: 468px) {
    .box img {
        width: 90%; /* Küçük ekranda biraz daha daralsın */
        max-height: 180px; /* Maksimum yükseklik sınırı */
    }

    .box p {
        font-size: 14px; /* Yazılar daha rahat okunacak şekilde küçültülsün */
        text-align: center;
    }
    #loginForm {
        width: 90%;
        right: 5px; /* Küçük ekranlarda biraz içeri çek */
    }

}

/* Giriş Butonu */
#loginButton {
	display: block;
	text-align: center;
    background-color: #0088a9;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

#loginButton:hover {
    background-color: #005f75;
}

/* Giriş Formu */
#loginForm {
    position: absolute;
    right: 10px; /* Ekranın tam sağında konumlandır */
    top: 60px;
    background-color: #1c1c1c;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
    width: 250px;
    text-align: left; /* İçeriği sola hizala */
}

/* Giriş Kutularının Konumu */
#loginForm input,
#loginForm button {
    width: 90%;
    margin-left: 0; /* Kutular da sola hizalansın */
}



#loginForm input {
    width: 90%;
    padding: 10px;
    margin-bottom: 10px;
    border: 2px solid #0088a9;
    border-radius: 6px;
    background-color: #2b2b2b;
    color: white;
    font-size: 16px;
}

#loginForm button {
    background-color: #0088a9;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    font-size: 16px;
}

#loginForm button:hover {
    background-color: #005f75;
}


/* Profil Kutusu */
#profileBox {
    position: absolute;
    right: 10px;
    top: 60px;
    background-color: #1c1c1c;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
    width: 250px;
    text-align: center;
}

/* Profil Fotoğrafı */
#profilePic {
    width: 80px;
    height: 80px;
    border-radius: 50%; /* Fotoğrafı daire yap */
}

/* Kullanıcı Bilgileri */
.profileInfo h2 {
    color: white;
    margin-top: 10px;
}

.profileInfo p {
    color: gray;
}

/* Butonlar */
.profileActions button {
    width: 90%;
    padding: 10px;
    margin: 5px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background-color: #0088a9;
    color: white;
    font-size: 16px;
}

.profileActions button:hover {
    background-color: #005f75;
}

#registerForm {
    display: none;
    position: absolute;
    right: 10px; /* Giriş formu ile aynı hizada olacak */
    top: 120px; /* Biraz aşağıda görünmeli */
    background-color: #1c1c1c;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
    width: 250px;
    text-align: center;
}

#registerForm input {
    width: 90%;
    padding: 10px;
    margin-bottom: 10px;
    border: 2px solid #0088a9;
    border-radius: 6px;
    background-color: #2b2b2b;
    color: white;
    font-size: 16px;
}

/* Kayıt Ol Butonu */
#submitRegister {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    background-color: #0088a9;
    color: white;
    font-size: 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

#submitRegister:hover {
    background-color: #005f75;
}

@media (max-width: 600px) {
    #loginForm, #registerForm, #profileBox {
        width: 90%;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    button, input {
        font-size: 18px;
        padding: 14px;
    }
}