/* ==========================================================================
   egirişim Gelişmeler 1.0.0 — "Kısa kısa"
   Ana sayfa bölümü (.egl-section, temanın .eh-head başlığıyla) ve
   /gelismeler/ sayfaları (.egl-page). Gri tonlar; kırmızı yalnızca
   son 24 saatin noktasında.
   ========================================================================== */

.egl-section,
.egl-page {
	--egl-0:   #ffffff;
	--egl-50:  #f8f8f9;
	--egl-100: #f2f2f2;
	--egl-150: #ebebed;
	--egl-200: #e1e1e5;
	--egl-300: #cdcdd3;
	--egl-500: #71717a;
	--egl-600: #52525b;
	--egl-700: #3f3f46;
	--egl-900: #18181b;
	--egl-acc: var(--eg-acc, #e5391f);
	--egl-shadow: 0 1px 2px rgba(24, 24, 27, .04), 0 8px 24px -12px rgba(24, 24, 27, .10);
	--egl-shadow-up: 0 2px 4px rgba(24, 24, 27, .05), 0 18px 40px -16px rgba(24, 24, 27, .22);
	font-family: var(--eg-font, Montserrat, system-ui, sans-serif);
	color: var(--egl-900);
}
.egl-section *, .egl-page * { box-sizing: border-box; }

/* Akış
   ------------------------------------------------------------------------- */
.egl-feed--grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}
/* Ana sayfa ızgarasında görsel, metnin sağında küçük kare olur; böylece
   görselli kart aynı satırdaki diğer kartları uzatmaz. Büyük görsel
   /gelismeler/ sayfalarında. */
body.eg-theme .egl-feed--grid .egl-item.has-img {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 84px;
	grid-template-rows: auto 1fr;
	grid-template-areas: "meta meta" "text img";
	column-gap: 14px; row-gap: 10px;
}
.egl-feed--grid .has-img .egl-meta { grid-area: meta; }
.egl-feed--grid .has-img .egl-text { grid-area: text; }
body.eg-theme .egl-feed--grid .has-img .egl-img {
	grid-area: img; align-self: start;
	width: 84px; margin: 2px 0 0; border-radius: 3px;
	aspect-ratio: 1 / 1;
}
.egl-feed--list { display: grid; gap: 12px; }

/* Kart
   ------------------------------------------------------------------------- */
body.eg-theme .egl-item {
	position: relative;
	display: flex; flex-direction: column; gap: 10px;
	margin: 0; padding: 16px 18px 18px;
	background: var(--egl-0);
	border: 1px solid var(--egl-150);
	border-radius: 3px;
	box-shadow: var(--egl-shadow);
	transition: box-shadow .2s, transform .2s;
	scroll-margin-top: 90px;
}
body.eg-theme .egl-item:hover { box-shadow: var(--egl-shadow-up); }
body.eg-theme .egl-item:target { border-color: var(--egl-300); box-shadow: 0 0 0 4px var(--egl-150), var(--egl-shadow-up); }

.egl-meta {
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
	font-size: 12.5px; line-height: 1;
}
.egl-dot {
	flex: none; width: 7px; height: 7px; border-radius: 50%;
	background: var(--egl-300);
}
.egl-item.is-fresh .egl-dot {
	background: var(--egl-acc);
	box-shadow: 0 0 0 3px rgba(229, 57, 31, .14);
}
body.eg-theme .egl-time,
body.eg-theme .egl-time:visited { color: var(--egl-500) !important; font-weight: 600; text-decoration: none !important; }
body.eg-theme .egl-time:hover { color: var(--egl-900) !important; }
.egl-tag {
	display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
	background: var(--egl-100); border: 1px solid var(--egl-200); border-radius: 3px;
	color: var(--egl-700); font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none;
}
.egl-meta .egl-tag { margin-left: auto; }

body.eg-theme .egl-text,
body.eg-theme .egl-text p {
	margin: 0 !important; padding: 0;
	color: var(--egl-900) !important;
	font-family: inherit !important;
	font-size: 15.5px !important; font-weight: 500; line-height: 1.55 !important;
	letter-spacing: -.005em;
	overflow-wrap: anywhere;
}
body.eg-theme .egl-text p + p { margin-top: .6em !important; }
body.eg-theme .egl-text a { color: var(--egl-900) !important; text-decoration: underline !important; text-decoration-color: var(--egl-300) !important; text-underline-offset: 3px; }
body.eg-theme .egl-text a:hover { text-decoration-color: var(--egl-900) !important; }

body.eg-theme .egl-img {
	display: block; overflow: hidden;
	margin: 2px 0 0; border-radius: 3px;
	background: var(--egl-150);
	aspect-ratio: 16 / 9;
}
.egl-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.egl-img:hover img { transform: scale(1.02); }

/* Ana sayfa: mobilde yatay kaydırma
   ------------------------------------------------------------------------- */
@media (max-width: 1018px) {
	.egl-feed--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.egl-feed--grid {
		display: flex; gap: 12px;
		margin: 0 -16px; padding: 2px 16px 14px;
		overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px;
		-webkit-overflow-scrolling: touch; scrollbar-width: none;
	}
	.egl-feed--grid::-webkit-scrollbar { display: none; }
	.egl-feed--grid .egl-item { flex: 0 0 84%; scroll-snap-align: start; }
	body.eg-theme .egl-text, body.eg-theme .egl-text p { font-size: 15px !important; }
}

/* /gelismeler/ sayfaları
   ------------------------------------------------------------------------- */
body.eg-theme:not(#eg) .td-main-content-wrap.egl-page {
	padding: 0 0 80px;
	background-color: var(--egl-100) !important;
	background-image: linear-gradient(180deg, #e9e9ec 0, var(--egl-100) 420px) !important;
}
.egl-page__in { width: 680px; max-width: 100%; margin: 0 auto; padding: 40px 0 0; }
@media (max-width: 767px) { .egl-page__in { padding: 24px 16px 0; } }

.egl-page__head { margin: 0 0 28px; }
body.eg-theme .egl-page .egl-page__title {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	margin: 0 !important; padding: 0 !important;
	color: var(--egl-900) !important; font-family: inherit !important;
	font-size: 40px !important; font-weight: 800 !important; line-height: 1.1 !important; letter-spacing: -.035em !important;
}
body.eg-theme .egl-page .egl-page__title::before {
	content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%;
	background: var(--egl-acc); box-shadow: 0 0 0 5px rgba(229, 57, 31, .14);
}
.egl-page__no {
	display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
	background: var(--egl-0); border: 1px solid var(--egl-200); border-radius: 3px;
	color: var(--egl-600); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
body.eg-theme .egl-page .egl-page__lead { margin: 10px 0 0 !important; color: var(--egl-600) !important; font-size: 16px !important; line-height: 1.5 !important; }
@media (max-width: 767px) { body.eg-theme .egl-page .egl-page__title { font-size: 30px !important; } }

body.eg-theme .egl-back,
body.eg-theme .egl-back:visited {
	display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px;
	color: var(--egl-600) !important; font-size: 13.5px; font-weight: 700; text-decoration: none !important;
}
body.eg-theme .egl-back:hover { color: var(--egl-900) !important; }

body.eg-theme .egl-page .egl-day {
	margin: 28px 0 12px !important; padding: 0 !important;
	color: var(--egl-500) !important; font-family: inherit !important;
	font-size: 12px !important; font-weight: 800 !important; line-height: 1 !important;
	letter-spacing: .08em !important; text-transform: uppercase !important;
}
.egl-page__head + .egl-day { margin-top: 0 !important; }
.egl-feed--one .egl-item { padding: 22px 24px 24px; }
body.eg-theme .egl-feed--one .egl-text, body.eg-theme .egl-feed--one .egl-text p { font-size: 19px !important; line-height: 1.5 !important; }

body.eg-theme .egl-all { margin: 20px 0 0 !important; text-align: center; }
body.eg-theme .egl-all a,
body.eg-theme .egl-pager a,
body.eg-theme .egl-pager span {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-width: 38px; height: 38px; padding: 0 14px;
	background: var(--egl-0); border: 1px solid var(--egl-200); border-radius: 3px;
	color: var(--egl-700) !important; font-size: 13.5px; font-weight: 700; text-decoration: none !important;
}
body.eg-theme .egl-all a:hover,
body.eg-theme .egl-pager a:hover { background: var(--egl-900); border-color: var(--egl-900); color: #fff !important; }
body.eg-theme .egl-pager .current { background: var(--egl-900); border-color: var(--egl-900); color: #fff !important; }
body.eg-theme .egl-pager .dots { background: none; border: 0; }
.egl-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 32px 0 0; }
.egl-empty { padding: 18px; border: 1px dashed var(--egl-300); border-radius: 3px; color: var(--egl-500); }

@media (prefers-reduced-motion: reduce) {
	.egl-item, .egl-img img { transition: none; }
}
