/* ==========================================================================
   ÇayBel — ana stiller
   Ölçüler mevcut sitenin (Elementor) ölçülerinden birebir alınmıştır.
   Kırılımlar: tablet ≤1024px, mobil ≤767px
   ========================================================================== */

:root {
	--yesil: #559581;
	--turuncu: #D3832C;
	--siyah: #1A1A18;
	--gri: #C5C6C6;
	--acik-gri: #F6F7F7;
	--gri-2: #F0F0F1;
	--beyaz: #FFFFFF;
	--ikincil: #54595F;
	--metin: #7A7A7A;
	--pasif: #9B9B9B;

	--f-govde: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--f-poppins: "Poppins", sans-serif;
	--f-unbounded: "Unbounded", sans-serif;
	--f-roboto: "Roboto", sans-serif;

	--kap: 1140px;
}

/* --- Temel ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0;
	font-family: var(--f-govde);
	font-size: 1rem;
	line-height: 1.5;
	color: #333;
	background: var(--beyaz);
}
img, svg { max-width: 100%; height: auto; vertical-align: middle; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.kap { max-width: var(--kap); margin: 0 auto; padding: 0 10px; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.atla:focus {
	clip: auto; width: auto; height: auto; z-index: 100000; top: 8px; left: 8px;
	padding: 10px 16px; background: var(--beyaz); color: var(--siyah);
}
:focus-visible { outline: 2px solid var(--turuncu); outline-offset: 2px; }

/* --- Header: üst bar ------------------------------------------------------ */
.site-header { position: relative; z-index: 2; }

.ust-bar { background: var(--acik-gri); padding: 10px; }
.ust-bar__kapsul {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
	background: var(--yesil); border-radius: 30px; padding: 5px;
}
.ust-bar__ikon { flex: 0 0 auto; display: block; width: 41px; }
.ust-bar__ikon img { width: 100%; display: block; }

.haber-bandi { flex: 1 1 auto; min-width: 0; height: 41px; position: relative; overflow: hidden; }
.haber-bandi__liste { position: relative; height: 25px; margin-top: 9px; }
.haber-bandi__oge {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center; text-align: center;
	transform: translateX(100%);
	transition: transform .25s ease;
}
.haber-bandi__oge.aktif { transform: translateX(0); }
.haber-bandi__oge.cikis { transform: translateX(-100%); }
.haber-bandi__oge a {
	font-family: var(--f-roboto); font-size: 15px; font-weight: 500;
	letter-spacing: 1px; line-height: 15px; color: var(--acik-gri);
	padding: 0 24px;
}
@media (prefers-reduced-motion: reduce) { .haber-bandi__oge { transition: none; } }

/* --- Header: logo + menü -------------------------------------------------- */
.ana-header {
	display: flex; align-items: flex-start;
	background: var(--acik-gri);
	border-radius: 0 0 15px 15px;
	padding: 15px 20px 25px;
}
.ana-header__logo { flex: 0 0 20%; }
.site-logo { display: inline-block; }
.ana-header__logo .site-logo { display: block; }
.ana-header__logo .site-logo img { width: 150px; display: block; margin: 2px 0 -5px; }

.ana-header__menu { flex: 0 0 80%; display: flex; justify-content: flex-end; margin: 2px -10px -2px 0; }
.ust-menu { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.ust-menu a {
	display: block; padding: 13px 12px;
	font-family: var(--f-unbounded); font-size: 14px; font-weight: 500;
	letter-spacing: 1px; line-height: 20px; color: var(--ikincil);
	transition: color .2s;
}
.ust-menu a:hover, .ust-menu a:focus-visible { color: var(--turuncu); }
.ust-menu .aktif a { color: var(--pasif); }

.menu-dugmesi { display: none; color: var(--turuncu); width: 45px; height: 45px; padding: 0; transition: color .2s; }
.menu-dugmesi svg { width: 100%; height: 100%; fill: currentColor; }
.menu-dugmesi:hover { color: var(--yesil); }

/* --- Açılır menü (☰) ------------------------------------------------------ */
.acilir-menu { position: fixed; inset: 0; z-index: 9999; }
.acilir-menu[hidden] { display: none; }
.acilir-menu__perde { position: absolute; inset: 0; background: rgba(0, 0, 0, .8); }
.acilir-menu__panel {
	position: absolute; top: 0; bottom: 0; left: 50%;
	width: 640px; max-width: 100%; margin-left: -320px;
	background: var(--acik-gri); border-radius: 15px;
	padding: 10px; overflow-y: auto;
	display: flex; flex-direction: column; justify-content: flex-start; gap: 20px;
	animation: menuYukaridan .5s ease both;
}
.acilir-menu__panel:focus { outline: none; }
@keyframes menuYukaridan { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes menuSoldan { from { transform: translateX(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .acilir-menu__panel { animation: none; } }

.acilir-menu__kapat {
	position: absolute; top: 20px; right: 20px; width: 15px; height: 15px;
	color: var(--gri); z-index: 1;
}
.acilir-menu__kapat svg { width: 100%; height: 100%; fill: currentColor; }
.acilir-menu__kapat:hover { color: var(--turuncu); }

.acilir-menu__ust, .acilir-menu__orta, .acilir-menu__alt { padding: 15px; }
.acilir-menu__logo {
	display: flex; align-items: center; justify-content: flex-start;
	background: var(--beyaz); border-radius: 30px; padding: 5px;
}
.acilir-menu__logo .site-logo { margin-left: 5px; height: 24px; display: flex; align-items: center; }
.acilir-menu__logo img { width: 48px; display: block; }

.acilir-menu__liste { display: flex; flex-direction: column; gap: 10px; }
.acilir-menu__liste a {
	display: flex; align-items: center; justify-content: center; height: 44px;
	padding: 10px; border-radius: 10px;
	font-family: var(--f-poppins); font-size: 18px; font-weight: 600; letter-spacing: 1px; line-height: 1;
	background: var(--beyaz); color: var(--ikincil);
	transition: color .2s;
}
.acilir-menu__liste li:nth-child(even) a { background: var(--acik-gri); color: var(--metin); }
.acilir-menu__liste a:hover, .acilir-menu__liste a:focus-visible { color: var(--turuncu); }

.magaza-kutu {
	display: block; padding: 10px; border-radius: 10px;
	background: var(--ikincil) url(../img/market-bg.jpg) center / cover no-repeat;
}
.magaza-kutu__ic {
	display: flex; align-items: flex-end; justify-content: space-between;
	height: 40px; padding-left: 15px; border-radius: 20px;
	background: url(../img/magaza-buton-bg.jpg) center / cover no-repeat;
}
.magaza-kutu__yazi {
	align-self: center;
	font-family: var(--f-unbounded); font-size: 20px; font-weight: 500; letter-spacing: 1px; line-height: 1;
	color: var(--gri-2);
}
.magaza-kutu__ikon { width: 40px; height: 40px; color: var(--turuncu); }
.magaza-kutu__ikon svg { width: 100%; height: 100%; fill: currentColor; }
.magaza-kutu:hover .magaza-kutu__ikon { color: var(--yesil); }

body.menu-acik { overflow: hidden; }

/* --- Footer --------------------------------------------------------------- */
.site-footer { margin-top: 75px; }
.footer-bant {
	display: flex; align-items: stretch;
	background: var(--yesil); border-radius: 10px;
	padding: 75px 10px;
}
.footer-kart {
	flex: 0 0 30%;
	display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 25px;
	margin-top: -150px;
	background: var(--acik-gri); border-radius: 10px; padding: 50px;
	text-align: center;
}
.footer-kart__logo img { width: 200px; display: block; }
.footer-kart__metin {
	font-family: var(--f-unbounded); font-size: 14px; font-weight: 400;
	letter-spacing: 1px; line-height: 24px; color: var(--ikincil);
}
.footer-kart__yukari { display: block; width: 45px; height: 45px; color: var(--turuncu); transition: color .2s; }
.footer-kart__yukari svg { width: 100%; height: 100%; fill: currentColor; }
.footer-kart__yukari:hover { color: var(--yesil); }

.footer-kolonlar {
	flex: 1 1 auto; padding-left: 50px;
	display: grid; grid-template-columns: 256fr 341fr 307fr; column-gap: 20px;
}
.footer-kolon { display: flex; flex-direction: column; gap: 25px; min-width: 0; }
.footer-kolon--baglantilar, .footer-kolon--iletisim { justify-content: space-between; }
.footer-grup { display: flex; flex-direction: column; gap: 25px; }

.footer-baslik {
	font-family: var(--f-unbounded); font-size: 18px; font-weight: 600;
	letter-spacing: 1px; line-height: 18px; color: var(--acik-gri);
}
.footer-liste { display: flex; flex-direction: column; gap: 10px; }
.footer-liste li { min-height: 24px; display: flex; align-items: center; }
.footer-liste a {
	font-family: var(--f-poppins); font-size: 16px; font-weight: 500;
	letter-spacing: 1px; line-height: 16px; color: var(--gri-2);
	transition: color .2s;
}
.footer-liste li:nth-child(even) a { color: var(--gri); }
.footer-liste a:hover, .footer-liste a:focus-visible { color: var(--turuncu); }
.footer-liste .kucuk a, .footer-liste--kucuk a { font-size: 14px; line-height: 14px; }
.footer-liste--buyuk { gap: 20px; }
.footer-liste--buyuk a { font-size: 20px; line-height: 20px; }

.footer-imza { padding: 32px 10px; text-align: center; }
.footer-imza a, .footer-imza span {
	font-family: var(--f-poppins); font-size: 12px; font-weight: 400; letter-spacing: 1px; line-height: 1;
	color: var(--metin); transition: color .2s;
}
.footer-imza strong { font-weight: 600; color: var(--ikincil); }
.footer-imza a:hover, .footer-imza a:hover strong { color: var(--turuncu); }

/* --- 404 ------------------------------------------------------------------ */
.sayfa-404 {
	min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 20px; padding: 0 8%; text-align: center;
	background: var(--acik-gri) url(../img/404-bg.jpg) center / cover no-repeat;
}
.sayfa-404__kod { font-family: var(--f-poppins); font-size: 200px; font-weight: 600; line-height: 1; color: var(--turuncu); }
.sayfa-404__metin { font-family: var(--f-poppins); font-size: 24px; font-weight: 300; line-height: 1.5; color: var(--ikincil); }
.sayfa-404__dugme {
	display: inline-block; padding: 12px 24px; border-radius: 3px;
	font-family: var(--f-poppins); font-size: 16px; line-height: 1; color: var(--beyaz);
	background: var(--turuncu); transition: background .2s, color .2s;
}
.sayfa-404__dugme:hover, .sayfa-404__dugme:focus-visible { background: var(--yesil); color: var(--acik-gri); }

/* --- Geçici içerik (sonraki aşamalarda şablonlar gelecek) ------------------ */
.gecici-icerik { padding-top: 40px; padding-bottom: 40px; }

/* ==========================================================================
   Tablet ≤1024px
   ========================================================================== */
@media (max-width: 1024px) {
	.ust-bar__ikon { width: 50px; }
	.haber-bandi { height: 50px; }
	.haber-bandi__liste { margin-top: 10px; }

	.ust-bar__kapsul { gap: 0; }
	.ana-header { padding: 20px 25px 25px; justify-content: space-between; align-items: center; }
	.ana-header__logo { flex: 0 0 50%; }
	.ana-header__menu { display: none; }
	.menu-dugmesi { display: block; margin-bottom: 6px; }

	.acilir-menu__panel {
		left: 0; margin-left: 0; width: 300px; padding: 0;
		border-radius: 0 15px 15px 0;
		animation-name: menuSoldan;
		justify-content: space-between; gap: 0;
	}
	.acilir-menu__ust, .acilir-menu__orta, .acilir-menu__alt { padding: 10px; }
	.acilir-menu__logo { border-radius: 10px; padding: 10px; justify-content: center; }
	.acilir-menu__logo .site-logo { margin-left: 0; height: auto; }
	.acilir-menu__logo img { width: 145px; }
	.acilir-menu__liste a { padding: 10px 25px; }
	.magaza-kutu__yazi { font-size: 13px; }
	.acilir-menu__kapat { top: 14px; right: 14px; }

	.sayfa-404 { padding: 0 5%; }
	.sayfa-404__kod { font-size: 145px; }
	.sayfa-404__metin { font-size: 18px; }
	.sayfa-404__dugme { font-size: 14px; }
}

/* ==========================================================================
   Mobil ≤767px
   ========================================================================== */
@media (max-width: 767px) {
	.ust-bar__ikon { width: 42px; }
	.haber-bandi { height: 42px; }
	.haber-bandi__liste { height: 33px; margin-top: 6px; }
	.haber-bandi__oge a { font-size: 13px; line-height: 15px; padding: 0 12px; }

	.ana-header { padding: 20px 20px 25px; }
	.ana-header__logo .site-logo img { width: 135px; }

	.site-footer { margin-top: 100px; }
	.footer-bant { flex-direction: column; padding: 0 10px 15px; }
	.footer-kart { flex: 0 0 auto; margin-top: -100px; padding: 50px 25px; }
	.footer-kolonlar { grid-template-columns: 1fr; row-gap: 50px; padding: 50px 25px 50px 15px; }
	.footer-kolon--baglantilar, .footer-kolon--iletisim { justify-content: flex-start; }
	.footer-kolon--iletisim { gap: 50px; }

	.sayfa-404__kod { font-size: 122px; }
	.sayfa-404__metin { font-size: 15px; }
}

/* ==========================================================================
   Footer — daralan ekranlar (14.10.2026): kolon sayısı genişliğe göre azalır,
   her kolonda başlık üstte, bağlantılar alta hizalı; taşma ve üst üste binme yok.
   ========================================================================== */
.footer-kolon { justify-content: space-between; }
.footer-liste a { overflow-wrap: anywhere; }
@media (max-width: 1199px) {
	.site-footer { margin-top: 100px; }
	.footer-bant { flex-direction: column; padding: 0 10px 15px; }
	.footer-kart { flex: 0 0 auto; margin-top: -100px; padding: 40px 25px; }
	.footer-kart__metin { max-width: 640px; }
	.footer-kolonlar { padding: 50px 25px; column-gap: 30px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
	.footer-kolonlar { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 50px; padding: 50px 15px; }
	.footer-kolon--baglantilar, .footer-kolon--projeler { justify-content: space-between; }
	.footer-kolon--iletisim { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 50px 30px; }
	.footer-kolon--iletisim .footer-grup { flex: 1 1 220px; min-width: 0; }
}
@media (max-width: 519px) {
	.footer-kolonlar { grid-template-columns: minmax(0, 1fr); padding: 50px 25px 50px 15px; }
	.footer-kolon, .footer-kolon--baglantilar, .footer-kolon--projeler { justify-content: flex-start; }
	.footer-kolon--iletisim { flex-direction: column; gap: 50px; }
	.footer-kolon--iletisim .footer-grup { flex: 0 0 auto; }
}