html {
	scroll-behavior: smooth;
}

body {
	background: url('../images/bg.jpg');
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	padding: 0px;
	margin: 0px;
	background-attachment: fixed;
}

* {
	list-style: none;
	text-decoration: none;
}

.ortaMenu {
	margin-top: 5px;
	width: 100%;
}

.ortaMenu>img {
	margin: 0 auto;
}

img {
	display: block;
}

.discord-widget {
	z-index: 9;
	position: fixed;
	left: 30px;
	bottom: 20px;
}

.discord-widget img {
	width: 100%;
}

.FaceImg {
	position: fixed;
	left: 30px;
	bottom: 180px;
	z-index: 9;
}

.FaceImg img {
	width: 100%;
}

.m-0 {
	margin: 0 !important;
}

.p-0 {
	padding: 0 !important;
}

.mt-5 {
	margin-top: 3rem !important
}

.ms-5 {
	margin-left: 3rem !important;
}

.me-5 {
	margin-right: 3rem !important;
}

.d-flex {
	display: flex !important
}

.pt-5 {
	padding-top: 3rem !important
}

.pb-5 {
	padding-bottom: 3rem !important
}

#images>img {
	margin: auto;
}

img {
	transition: 500ms;
}

img:hover {
	filter: brightness(1.2);
	transition: 500ms;
}

.butonlar {
	position: fixed;
	right: 60px;
	top: 10px;
	z-index: 9;
}

.butonlar img {
	width: 
}

.butonlar a {
	display: block;
	margin-bottom: 20px;
}

@font-face {
	font-family: Fenomen;
	src: url("../fonts/Fenomen Slab SCN Light.otf");
}

.basliklar {
	z-index: 9;
	position: fixed;
	right: 70px;
	top: 350px;
	border: 1px dashed #8492b9;
	background: linear-gradient(90deg, rgb(10 14 34) 0%, rgb(6 8 22) 35%, rgb(8 12 32) 100%);
}

.basliklar ul {
	width: 100%;
	list-style: none;
	margin: 0px !important;
	padding: 10px 20px !important;
}

.basliklar a {
	font-family: Fenomen;
	font-size: 15px;
	color: #4b5f81;
	transition: 500ms;
}

.basliklar a:hover {
	filter: brightness(0.8);
	transition: 500ms;
}

@media (max-width: 1600px) {
	img {
		width: 50%;
	}

	.butonlar {
		right: 190px;
	}

	.basliklar {
		right: 60px;
	}
}

@media (max-width: 1370px) {
	img {
		width: 50%;
	}

	.butonlar img {
		width: 90%;
	}

	.basliklar {
		top: 300px;
	}

	.butonlar {
		right: 95px;
	}

	.basliklar {
		right: 25px;
	}

	.discord-widget img {
		width: 70%;
	}

	.FaceImg {
		bottom: 140px;
	}

	.FaceImg img {
		width: 70%;
	}
}

@media (max-width: 959px) {
	.butonlar {
		position: inherit;
		display: flex;
		justify-content: center;
		width: 100%;
		margin-top: 10px;
	}

	.butonlar img {
		width: 100px;
	}

	.basliklar {
		display: none;
	}

	img {
		width: 100%;
	}

	.ortaMenu {
		margin-top: 0px;
	}

	.discord-widget {
		display: none;
	}

	.FaceImg {
		display: none;
	}
}

/* genel: yumuşak kaydırma */
html { scroll-behavior: smooth; }

/* görseller kayarken üstte bir şey sabitse tampon (isteğe bağlı) */
.ortaMenu img { scroll-margin-top: 12px; }

/* sağ hızlı erişim çubuğu */
.quick-nav {
  position: fixed;
  left: 24px;
  top: 42%;
  transform: translateY(-50%);
  width: 240px;
  max-height: 80vh;
  overflow: auto;
  background: rgba(14, 14, 14, 0.82);
  border: 1px solid #6b521b;
  border-radius: 14px;
  padding: 14px 12px;
  backdrop-filter: blur(6px);
  z-index: 9998;
}

/* başlık */
.quick-nav .q-title {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 16px;
  color: #f3c56a;
  letter-spacing: 0.2px;
}

/* liste */
.quick-nav ol { list-style: none; margin: 0; padding: 0; position: relative; }
.quick-nav ol::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: #d8a64a33; /* timeline çizgisi */
}

/* bağlantılar */
.quick-nav a {
  display: block;
  position: relative;
  padding: 8px 10px 8px 32px;
  margin: 4px 0;
  color: #e9c26e;
  text-decoration: none;
  border-radius: 8px;
}
.quick-nav a::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f3c56a;
  transform: translateY(-50%);
  box-shadow: 0 0 0 3px #f3c56a22;
}
.quick-nav a:hover,
.quick-nav a:focus { background: #f3c56a1a; }

/* mobilde gizle (istersen göster) */
@media (max-width: 1024px) {
  .quick-nav { display: none; }
}

#images {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* hepsi ortalansın */
  gap: 10px;                 /* aralık */
}

/* Tüm çocuklar aynı kutu olsun */
#images .img-item {
  display: flex;             /* içeriği sıkı sarsın */
  align-items: center;
  justify-content: center;
}

/* Her türlü eski float/text-align kalıntısını sıfırla */
#images .img-item,
#images .img-item a,
#images .img-item img {
  float: none !important;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#images .img-item a { display: block; }
#images .img-item img {
  display: block;
  max-width: 100%;
  height: auto;
  cursor: pointer;
}