/* Paylaşılan bileşenler: düğme, chip, etiket, bölüm başlığı, breadcrumb, sayfalama, medya, makale kartı. */

/* Button — Figma 5:136 (yükseklik 46, radius 12) */
.eg-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 46px; padding: 13px 22px; border-radius: var(--eg-radius-md);
	font: var(--eg-type-ui-button); white-space: nowrap; border: 1px solid transparent;
	transition: background-color var(--eg-motion-fast) var(--eg-ease), border-color var(--eg-motion-fast) var(--eg-ease), color var(--eg-motion-fast) var(--eg-ease);
}
.eg-btn--primary { background: var(--eg-color-brand-primary); color: var(--eg-color-text-inverse); box-shadow: 0 8px 10px rgba(24, 123, 255, 0.25); }
.eg-btn--primary:hover { background: var(--eg-color-brand-primary-hover); color: var(--eg-color-text-inverse); }
.eg-btn--secondary { background: var(--eg-color-surface-default); border-color: var(--eg-color-border-brand); color: var(--eg-color-brand-primary); }
.eg-btn--secondary:hover { background: var(--eg-color-surface-brand-soft); color: var(--eg-color-brand-primary); }
.eg-btn--ghost { background: var(--eg-color-surface-brand-soft); color: var(--eg-color-brand-primary); }
.eg-btn--ghost:hover { background: var(--eg-color-border-brand); color: var(--eg-color-brand-primary); }
.eg-btn:focus-visible { outline: none; box-shadow: var(--eg-focus-ring); }
.eg-btn[disabled], .eg-btn.is-disabled { background: var(--eg-color-border-strong); color: var(--eg-color-text-muted); box-shadow: none; cursor: not-allowed; }
.eg-btn--secondary[disabled], .eg-btn--ghost[disabled] { background: var(--eg-color-surface-muted); }
.eg-btn.is-loading .eg-icon--loader-circle { animation: eg-spin 0.9s linear infinite; }
.eg-btn--block { width: 100%; }
.eg-btn--pill { border-radius: var(--eg-radius-pill); }
@keyframes eg-spin { to { transform: rotate(360deg); } }

/* Chip/Filter — Figma 5:143 */
.eg-chip {
	display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 18px; border-radius: 10px;
	background: var(--eg-color-surface-default); border: 1px solid var(--eg-color-border-default);
	font: var(--eg-type-label-md); color: var(--eg-color-text-primary); white-space: nowrap;
	transition: background-color var(--eg-motion-fast) var(--eg-ease);
}
.eg-chip:hover { background: var(--eg-color-surface-brand-soft); color: var(--eg-color-text-primary); }
.eg-chip.is-active, .eg-chip[aria-current="true"], .eg-chip[aria-pressed="true"] { background: var(--eg-color-brand-primary); border-color: var(--eg-color-brand-primary); color: var(--eg-color-text-inverse); }
.eg-chips { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 767px) { .eg-chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--eg-gutter)); padding-inline: var(--eg-gutter); } .eg-chips--scroll::-webkit-scrollbar { display: none; } }

/* Tag/Eyebrow — Figma 5:144 */
.eg-eyebrow {
	display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: var(--eg-radius-xs);
	background: var(--eg-color-surface-brand-soft); color: var(--eg-color-brand-primary-strong);
	font: var(--eg-type-label-xs); letter-spacing: var(--eg-tracking-label-xs); white-space: nowrap;
}

/* Section/Heading — Figma 5:176 */
.eg-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 32px; margin-bottom: 20px; }
.eg-section-head__title { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.eg-section-head__icon { display: inline-flex; color: var(--eg-color-brand-primary); }
.eg-section-head__h { font: var(--eg-type-heading-h3); letter-spacing: var(--eg-tracking-h3); }
.eg-section-head__sub { font: var(--eg-type-body-sm); color: var(--eg-color-text-muted); margin-left: 10px; }
.eg-link-more { display: inline-flex; align-items: center; gap: 6px; font: var(--eg-type-label-sm); color: var(--eg-color-brand-primary); white-space: nowrap; min-height: 32px; }
.eg-link-more:hover { color: var(--eg-color-brand-primary-hover); }
@media (max-width: 767px) {
	.eg-section-head__h { font: var(--eg-type-heading-h4); letter-spacing: var(--eg-tracking-h4); }
	.eg-section-head__sub { display: none; }
}

/* Breadcrumb — Figma 5:146 */
.eg-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.eg-breadcrumb__item { display: inline-flex; align-items: center; gap: 8px; font: var(--eg-type-ui-meta); color: var(--eg-color-text-secondary); }
.eg-breadcrumb__item a { color: var(--eg-color-text-secondary); }
.eg-breadcrumb__item a:hover { color: var(--eg-color-brand-primary); }
.eg-breadcrumb__item [aria-current] { color: var(--eg-color-text-primary); }
.eg-breadcrumb__home, .eg-breadcrumb__sep { color: var(--eg-color-text-secondary); flex: none; }

/* Pagination — Figma 27:10980 */
.eg-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 40px; }
.eg-pagination__list { display: flex; gap: 8px; }
.eg-pagination__item {
	display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px;
	background: var(--eg-color-surface-default); border: 1px solid var(--eg-color-border-default);
	font: var(--eg-type-label-md); color: var(--eg-color-text-primary);
}
a.eg-pagination__item:hover { background: var(--eg-color-surface-brand-soft); color: var(--eg-color-text-primary); }
.eg-pagination__item.is-active { background: var(--eg-color-brand-primary); border-color: var(--eg-color-brand-primary); color: var(--eg-color-text-inverse); box-shadow: var(--eg-shadow-brand); }
.eg-pagination__item.is-disabled { background: var(--eg-color-surface-muted); color: var(--eg-color-text-muted); }
.eg-pagination__item--gap { background: none; border: 0; color: var(--eg-color-text-muted); }
.eg-pagination__compact { display: none; font: var(--eg-type-label-md); }
@media (max-width: 767px) {
	.eg-pagination { justify-content: space-between; background: var(--eg-color-surface-default); border: 1px solid var(--eg-color-border-default); border-radius: var(--eg-radius-md); padding: 10px 12px; }
	.eg-pagination__list { display: none; }
	.eg-pagination__compact { display: block; }
}

/* Medya (16:10 oran, yer tutucu) */
.eg-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--eg-color-surface-brand-soft); }
.eg-media > img, .eg-media__img { width: 100%; height: 100%; object-fit: cover; }
.eg-media__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--eg-cat-bg, var(--eg-color-surface-brand-soft)); color: var(--eg-cat-ink, var(--eg-color-brand-primary)); }

/* Card/Article — Figma 5:186 */
.eg-card {
	position: relative; display: flex; flex-direction: column; overflow: hidden;
	background: var(--eg-color-surface-default); border: 1px solid var(--eg-color-border-default);
	border-radius: var(--eg-radius-lg); box-shadow: var(--eg-shadow-sm);
	transition: border-color var(--eg-motion-fast) var(--eg-ease), box-shadow var(--eg-motion-base) var(--eg-ease), transform var(--eg-motion-base) var(--eg-ease);
}
.eg-card:hover { border-color: var(--eg-color-border-brand); box-shadow: var(--eg-shadow-md); }
@media (prefers-reduced-motion: no-preference) { .eg-card:hover { transform: translateY(-2px); } }
.eg-card__body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; }
.eg-card__title { font: var(--eg-type-heading-h5); color: var(--eg-color-text-primary); }
.eg-card__title a { color: inherit; }
/* Tüm kart tıklanabilir; tek odaklanabilir bağlantı başlıkta. */
.eg-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.eg-card__title a:focus-visible { outline: none; }
.eg-card:has(.eg-card__title a:focus-visible) { outline: 2px solid var(--eg-color-border-focus); outline-offset: 2px; }
.eg-card__excerpt { font: var(--eg-type-body-sm); color: var(--eg-color-text-secondary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.eg-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: auto; font: var(--eg-type-ui-meta); color: var(--eg-color-text-muted); }
.eg-card__meta span { display: inline-flex; align-items: center; gap: 6px; }
.eg-card__eyebrow { position: relative; z-index: 1; align-self: flex-start; }
.eg-card--row { flex-direction: row; }
.eg-card--row .eg-media { flex: none; width: 160px; aspect-ratio: 16 / 10; }

/* Pastel kategori kutusu — Figma Card/Category 5:198 */
.eg-cat-tile {
	position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 10px;
	background: var(--eg-color-surface-default); border: 1px solid var(--eg-color-border-default); color: var(--eg-color-text-primary);
	box-shadow: var(--eg-shadow-xs); transition: box-shadow var(--eg-motion-base) var(--eg-ease), border-color var(--eg-motion-fast) var(--eg-ease);
}
.eg-cat-tile:hover { color: var(--eg-color-text-primary); border-color: var(--eg-color-border-brand); box-shadow: var(--eg-shadow-sm); }
.eg-cat-tile__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 5 / 3; overflow: hidden; background: var(--eg-cat-bg, var(--eg-color-surface-muted)); color: var(--eg-cat-ink, var(--eg-color-brand-primary)); }
.eg-cat-tile__img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--eg-ease); }
.eg-cat-tile:hover .eg-cat-tile__img { transform: scale(1.04); }
.eg-cat-tile__body { display: grid; gap: 2px; padding: 10px 12px 12px; }
.eg-cat-tile__name { font: 700 14px/19px var(--eg-font-family); overflow-wrap: anywhere; }
.eg-cat-tile__count { font: 400 12.5px/17px var(--eg-font-family); color: var(--eg-color-text-muted); }

/* Sıra numarası rozeti (popüler listeler) */
.eg-rank { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: var(--eg-radius-xs); background: var(--eg-color-surface-muted); font: var(--eg-type-label-sm); color: var(--eg-color-text-primary); }

/* Renkli kategori ikonu (eg_term_icon_html: eg_icon_img / assets/img/categories/*.webp). Boyut width/height özniteliğinden. */
.eg-term-icon { display: block; flex: none; object-fit: contain; }
/* Tema içi marka logosu (eg_brand_logo: assets/brands/*.svg) — beyaz kutuda marka renginde. */
img.eg-brand-logo { object-fit: contain; }