/*CSS3 Tasarım .:Emiray Can Eşref ŞENTÜRK:.*/
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond&family=IBM+Plex+Sans&display=swap');
::selection{background:var(--text-color);color:var(--bg-color); text-shadow: 1px 0 0 rgba(0,0,0,0.9)}
:root{
	--primary-dark:#000;
	--text-color:#333;
	--bg-color:#FFFFFF;
	--border-color:#EDEEE8;
	--font-heading:'IBM Plex Sans',sans-serif;
	--font-main:'Cormorant Garamond',serif;
}*, *::before, *::after{box-sizing:border-box;transition:all 0.3s ease-in-out !important}
hr{border:none;border-top:1px solid var(--border-color)}
a{all:unset}a:hover,button:hover,input[type="submit"]:hover{cursor:pointer;filter:opacity(0.7)}
p{text-align:justify;word-wrap: break-word;overflow-wrap: break-word}
strong,b,span,h1,h2,h3,h4,h5,h6,form,.hero-section{margin:0;padding:0;font-family:var(--font-heading)}
button{background:none;border:1px solid var(--text-color);color:var(--text-color);padding:10px}

html,body{font-family:var(--font-main);background-color:var(--bg-color);color:var(--text-color);margin:0;padding:0}
	header{background:var(--primary-dark);padding:5px 0;text-align:center;border-bottom:1px solid var(--border-color)}
		#logo{font-size:1.5rem;color:#fff}
		.vertical-menu{position:fixed;top:0;left:-280px;width:280px;height:100vh;z-index:1000;display:flex;flex-direction:column;background-color:var(--primary-dark);color:#fff;border-right:1px solid var(--border-color);font-family:var(--font-heading)}
			.vertical-menu.active{left:0}
		.menu-toggle{position:fixed;top:0px;left:0px;width:40px;height:40px;background:var(--primary-dark);border:0;cursor:pointer;z-index:1001;display:flex;flex-direction:column;justify-content:space-around;padding:5px}
		.menu-toggle .bar{display:block;width:100%;height:3px;background:#fff}
			.menu-toggle.active .bar:nth-child(1){transform:translateY(8px) rotate(45deg)}
			.menu-toggle.active .bar:nth-child(2){opacity:0}
			.menu-toggle.active .bar:nth-child(3){transform:translateY(-11px) rotate(-45deg)}
		body.menu-open{padding-left:280px}
		.menu-header{padding:10px}
		.menu-nav{overflow-y:auto;text-align:left}
			.menu-nav ul{list-style:none;padding:0;margin:0}
				.menu-nav li a{display:block;padding:10px 20px}
					.menu-nav a span{float:right}
		.submenu{list-style:none;max-height:0;overflow:hidden;opacity:0}
			.submenu.open{max-height:200px;opacity:1}

	.container{width:100%;max-width:760px;margin:0 auto;padding:100px 0}
		.hero-section{grid-template-columns:1fr 1fr;display:grid;gap:50px}
		.hero-image{background-size:cover;background-position:center;height:500px}
		.hero-text{display:flex;flex-direction:column;justify-content:center}
			.hero-text h1{margin:0 0 20px 0}
			#excerpt{text-align:left}
		#tags {list-style:none;display:flex;padding:0}
			#tags li{margin:0 10px 0 0;font-family:var(--font-heading);padding:10px;border:1px solid var(--border-color)}
		#legal, #legal p, #legal ul li{font-family:var(--font-heading);text-align:left}
			#legal li{font-weight:bold}
				#legal ul li{font-weight:400}
					#legal ul li::marker{font-weight:bold}

		.left-column{grid-template-columns:repeat(2, 1fr);display:grid;gap:50px}
			.section-title{text-transform:capitalize;grid-column:1 / -1;border-bottom:1px solid var(--border-color);margin:50px 0 0 0}
				.article-card-small .img-placeholder{width:100%;background-size:cover;background-position:center;height:500px}
				.article-card-small p{text-align:left;font-family:var(--font-heading)}

	#hata{width:20rem;height:30em;margin:auto;display:flex;align-items:center}
		#hata article{margin:0 0 0 15px}
			#hata img{width:10rem}
			#hata button{margin:10px 0 0 0}

	.comment{padding:0 0 5px 0;color:var(--text-color);border:none;border-bottom:1px solid var(--border-color);}
		.comment p{text-align:left}
		.form-row{margin:0 0 20px 0;display:flex;flex-direction:column}
			input,textarea{; outline:none;background:var(--border-color);color:var(--text-color);border:1px solid var(--border-color);padding:5px 10px}
			input:focus,textarea:focus{border:1px solid #ddd}
			textarea{resize:none;min-height:100px;width:100%}
				#char{font-size:10pt}
			input{width:20%}

footer{font-family:var(--font-heading);background-color:var(--primary-dark);color:#fff;padding:40px 0 20px;border-top:1px solid var(--border-color);font-size:0.75rem}
	.footer-grid{display:grid;grid-template-columns:repeat(4, 1fr)}
		.footer-col ul{list-style:none;padding:0}
	.social{text-align:center; margin:40px 0 0 0}
		.social a{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center}
	.copyright{text-align:center;padding:10px 0 0 0;border-top:1px solid var(--border-color)}
#scrollTopBtn{display:none;position:fixed;bottom:0;right:0;z-index:99;border:none;background:rgba(0, 0, 0, 0.6);color:#fff;cursor:pointer;width:40px;height:40px}

@media (max-width:1024px){
	.container{padding:10px}
		.left-column{grid-template-columns:1fr}
		.hero-section{grid-template-columns:1fr}
		.footer-grid{grid-template-columns:1fr;gap:50px}
	body.menu-open{padding-left:0}
	input{width:100%}
}body.dark-mode{--primary-dark:#000;--bg-color:#000;--text-color:#fff;--border-color:#222}body.dark-mode #hata img{filter:invert(1)}