/* ==========================================================================
   İçerik blokları (eg/*) — Figma Article/* bileşenleri (10:999 … 10:1170).
   Ön yüz + editör (add_editor_style) ortak. Renkli kutular yalnız semantik gerektiğinde.
   ========================================================================== */

/* --- Kısaca (Article/QuickAnswer 10:999) --------------------------------- */
.eg-quick-answer { display: flex; align-items: flex-start; gap: 18px; padding: 20px 28px 22px 18px; background: #edf3fe; border: 1px solid #e3ebfb; border-radius: 14px; box-shadow: 0 8px 22px -14px rgba(24, 123, 255, .28); }
.eg-quick-answer__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: #dbe7fd; color: var(--eg-color-brand-primary); }
.eg-quick-answer__icon svg, .eg-quick-answer__icon .eg-bicon { width: 30px; height: 30px; fill: currentColor; }
.eg-quick-answer__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.eg-quick-answer__body { padding-top: 4px; gap: 4px; }
.eg-quick-answer__title { font: 700 17px/24px var(--eg-font-family); color: var(--eg-color-brand-primary); margin: 0; }
.eg-quick-answer__text { font: 400 16px/26px var(--eg-font-family); color: var(--eg-color-text-primary); margin: 0; }
.eg-quick-answer__text p { margin: 0; }
.eg-quick-answer__text p + p { margin-top: 8px; }
.eg-quick-answer__text strong, .eg-quick-answer__text b { font-weight: 600; color: var(--eg-color-text-primary); }

/* --- Uyarı / ipucu / bilgi / önemli (10:1049, 10:1057, 10:1065) ---------- */
.eg-callout { display: flex; align-items: flex-start; gap: 16px; padding: 20px 24px 22px 20px; border: 1px solid var(--eg-color-border-default); border-radius: 14px; }
.eg-callout__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; }
.eg-callout__icon svg, .eg-callout__icon .eg-bicon { width: 26px; height: 26px; }
.eg-callout__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.eg-callout__title { margin: 0; font: var(--eg-type-heading-h5); }
.eg-callout__text { margin: 0; font: var(--eg-type-body-md); color: var(--eg-color-text-secondary); }
.eg-callout__text p { margin: 0; }
.eg-callout__text p + p { margin-top: 8px; }
.eg-callout--info { align-items: center; gap: 16px; padding: 18px 24px 20px 14px; background: #f0f4fe; border-color: #e5ecfb; }
.eg-callout--info .eg-callout__icon { position: relative; width: 50px; height: 50px; border-radius: 50%; background: #dae7fe; color: #fff; }
.eg-callout--info .eg-callout__icon::before { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: var(--eg-color-brand-primary); }
.eg-callout--info .eg-callout__icon svg, .eg-callout--info .eg-callout__icon .eg-bicon { position: relative; width: 18px; height: 18px; stroke-width: 2.8; }
.eg-callout--info .eg-callout__icon circle { display: none; }
.eg-callout--info .eg-callout__title { font: 700 16px/24px var(--eg-font-family); color: #1f5fd6; }
.eg-callout--info .eg-callout__text { font: 400 15px/24px var(--eg-font-family); }
.eg-callout--tip { background: var(--eg-color-surface-success-soft); }
.eg-callout--tip .eg-callout__icon, .eg-callout--tip .eg-callout__title { color: var(--eg-color-status-success); }
.eg-callout--warning { background: var(--eg-color-surface-warning-soft); }
.eg-callout--warning .eg-callout__icon { color: var(--eg-color-status-warning); }
.eg-callout--warning .eg-callout__title { color: var(--eg-color-text-primary); }
.eg-callout--important { background: var(--eg-color-surface-danger-soft); }
.eg-callout--important .eg-callout__icon, .eg-callout--important .eg-callout__title { color: var(--eg-color-status-danger); }

/* --- Adım kutusu / bilgi kartları (eg/step) ------------------------------ */
.eg-steps--list { padding: 24px; background: var(--eg-color-background-subtle); border-radius: 14px; }
.eg-steps__list { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; list-style: none; }
.eg-steps__item { display: flex; align-items: flex-start; gap: 16px; }
.eg-steps__icon { flex: none; display: inline-flex; width: 24px; height: 24px; color: var(--eg-color-brand-primary); }
.eg-steps__icon svg, .eg-steps__icon .eg-bicon { width: 24px; height: 24px; }
.eg-steps__num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: var(--eg-color-brand-primary); color: #fff; font: var(--eg-type-label-sm); }
.eg-steps__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.eg-steps__title { font: var(--eg-type-label-md); color: var(--eg-color-text-primary); }
.eg-steps__text { font: var(--eg-type-body-sm); color: var(--eg-color-text-secondary); }
.eg-steps--cards .eg-steps__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.eg-steps--cards .eg-steps__item { align-items: center; gap: 14px; padding: 18px; background: var(--eg-color-background-subtle); border-radius: 12px; }
.eg-steps--cards .eg-steps__body { gap: 2px; }
.eg-steps--cards .eg-steps__title { font: var(--eg-type-label-sm); }

/* --- Kontrol listesi (eg/checklist) -------------------------------------- */
.eg-checklist { display: flex; flex-direction: column; gap: 10px; padding: 0; list-style: none; }
.eg-checklist__item { display: flex; align-items: flex-start; gap: 12px; font: var(--eg-type-body-md); color: var(--eg-color-text-secondary); }
.eg-checklist__item + .eg-checklist__item { margin-top: 0; }
.eg-checklist__mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-top: 4px; border-radius: 50%; background: var(--eg-color-brand-primary); color: #fff; }
.eg-checklist__mark svg, .eg-checklist__mark .eg-bicon { width: 12px; height: 12px; stroke-width: 3; }
.eg-checklist__text { flex: 1 1 0; min-width: 0; }

/* --- Karşılaştırma (10:1116) --------------------------------------------- */
.eg-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.eg-compare__card { display: flex; align-items: flex-start; gap: 18px; padding: 24px 24px 26px 22px; border: 1px solid; border-radius: 14px; }
.eg-compare__card--positive { background: var(--eg-color-surface-success-soft); border-color: #bde6d1; }
.eg-compare__card--negative { background: var(--eg-color-surface-danger-soft); border-color: #f8c9cb; }
.eg-compare__card--neutral { background: var(--eg-color-surface-brand-soft); border-color: var(--eg-color-border-default); }
.eg-compare__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; }
.eg-compare__icon svg, .eg-compare__icon .eg-bicon { width: 26px; height: 26px; }
.eg-compare__card--positive .eg-compare__icon { background: #d2eedf; color: var(--eg-color-status-success); }
.eg-compare__card--negative .eg-compare__icon { background: #fadadb; color: var(--eg-color-status-danger); }
.eg-compare__card--neutral .eg-compare__icon { background: #d6e6ff; color: var(--eg-color-brand-primary); }
.eg-compare__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.eg-compare__title { margin: 0; font: var(--eg-type-heading-h5); color: var(--eg-color-text-primary); }
.eg-compare__card--negative .eg-compare__title { color: var(--eg-color-status-danger); }
.eg-compare__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.eg-compare__list li { display: flex; align-items: flex-start; gap: 10px; font: var(--eg-type-body-sm); color: var(--eg-color-text-secondary); }
.eg-compare__list li + li { margin-top: 0; }
.eg-compare__mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; color: #fff; background: var(--eg-color-status-success); }
.eg-compare__card--negative .eg-compare__mark { background: var(--eg-color-status-danger); }
.eg-compare__card--neutral .eg-compare__mark { background: var(--eg-color-brand-primary); }
.eg-compare__mark svg { width: 12px; height: 12px; stroke-width: 3; }

/* --- Ekran görüntüsü (10:1041) ------------------------------------------- */
.eg-shot { --eg-shot-w: 300px; display: flex; flex-direction: column; align-items: center; gap: 12px; margin-inline: auto; width: min(100%, calc(var(--eg-shot-w) + 60px)); }
.eg-shot > .eg-shot__frame { width: min(100%, var(--eg-shot-w)); }
.eg-shot__frame { position: relative; overflow: hidden; border-radius: 14px; background: var(--eg-color-surface-default); box-shadow: var(--eg-shadow-xs); }
.eg-shot__frame::after { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--eg-color-border-default); border-radius: inherit; pointer-events: none; }
.eg-shot__img { display: block; width: 100%; height: auto; }
.eg-shot__zoom { display: block; cursor: zoom-in; }
.eg-shot__zoom:focus-visible { outline-offset: -3px; }
.eg-shot__badge { position: absolute; left: 8px; top: 8px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 14px; background: var(--eg-color-brand-primary); color: #fff; font: var(--eg-type-label-sm); pointer-events: none; }
.eg-shot__hotspot { position: absolute; left: var(--x); top: var(--y); z-index: 1; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--eg-color-status-danger); color: #fff; font: 700 12px/1 var(--eg-font-family); box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 2px 8px rgba(11, 23, 52, .25); pointer-events: none; }
.eg-shot__caption { margin: 0; font: var(--eg-type-body-sm); color: var(--eg-color-text-secondary); text-align: center; }
.eg-shot__caption strong { font-weight: 700; color: var(--eg-color-text-primary); }

/* --- Ekran görüntüsü dizisi (10:1035) ------------------------------------ */
.eg-seq { position: relative; }
.eg-seq__track { display: flex; align-items: flex-start; margin: 0; padding: 0; list-style: none; }
.eg-seq__step { flex: 1 1 0; min-width: 0; }
.eg-seq__step + .eg-seq__step { margin-left: 48px; margin-top: 0; }
.eg-seq--4 .eg-seq__step + .eg-seq__step { margin-left: 36px; }
.eg-seq__fig { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0; }
.eg-seq__media { position: relative; width: 100%; }
.eg-seq__media .eg-shot__frame { width: 100%; }
.eg-seq__media .eg-shot__img { max-height: 620px; width: 100%; object-fit: contain; object-position: top center; background: var(--eg-color-surface-default); }
/* Tek adımlık dikey dizi: tekli görüntü gibi ortalı ve dar */
.eg-seq--1:not(.eg-seq--wide) .eg-seq__step { flex: 0 1 320px; margin-inline: auto; }
/* Yatay (web/masaüstü) görüntüler: alt alta, tam içerik genişliği, kırpma yok */
.eg-shot--wide { width: 100%; }
.eg-shot--wide > .eg-shot__frame { width: 100%; }
.eg-seq--wide .eg-seq__track { flex-direction: column; align-items: stretch; gap: 28px; overflow: visible; margin-inline: 0; padding-inline: 0; }
.eg-seq--wide .eg-seq__step, .eg-seq--wide.eg-seq--4 .eg-seq__step { flex: none; width: 100%; }
.eg-seq--wide .eg-seq__step + .eg-seq__step, .eg-seq--wide.eg-seq--4 .eg-seq__step + .eg-seq__step { margin-left: 0; }
.eg-seq--wide .eg-seq__arrow { display: none; }
.eg-seq--wide .eg-seq__media .eg-shot__img { max-height: none; object-fit: fill; }
.eg-seq--wide .eg-seq__fig { align-items: stretch; gap: 10px; }
.eg-seq--wide .eg-seq__caption { text-align: left; color: var(--eg-color-text-secondary); }
.eg-seq__arrow { position: absolute; left: -36px; top: 50%; transform: translateY(-50%); display: inline-flex; width: 24px; justify-content: center; color: var(--eg-color-brand-primary); }
.eg-seq--4 .eg-seq__arrow { left: -30px; }
.eg-seq__arrow svg, .eg-seq__arrow .eg-bicon { width: 22px; height: 22px; }
.eg-seq__caption { margin: 0; font: var(--eg-type-body-sm); color: var(--eg-color-text-primary); text-align: center; }
.eg-seq__caption strong { font-weight: 700; }
.eg-seq__dots { display: none; }

@media (max-width: 767px) {
	.eg-seq:not(.eg-seq--wide) .eg-seq__track { overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(-1 * var(--eg-gutter)); padding-inline: var(--eg-gutter); scroll-padding-inline: var(--eg-gutter); }
	.eg-seq__track::-webkit-scrollbar { display: none; }
	.eg-seq:not(.eg-seq--wide) .eg-seq__step { flex: 0 0 250px; scroll-snap-align: start; }
	.eg-seq:not(.eg-seq--wide) .eg-seq__step + .eg-seq__step { margin-left: 48px; }
	.eg-seq--wide .eg-seq__track { gap: 20px; }
	.eg-seq__arrow, .eg-seq--4 .eg-seq__arrow { left: -36px; }
	.eg-seq__dots { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; }
	.eg-seq__dot { width: 6px; height: 6px; border-radius: 3px; background: var(--eg-color-border-strong); transition: width var(--eg-motion-base) var(--eg-ease), background-color var(--eg-motion-base) var(--eg-ease); }
	.eg-seq__dot.is-active { width: 18px; background: var(--eg-color-brand-primary); }
	.eg-seq__status { margin-left: 6px; font: var(--eg-type-body-xs); color: var(--eg-color-text-muted); }
	.eg-shot { width: 100%; }
	.eg-shot > .eg-shot__frame { width: min(100%, var(--eg-shot-w)); }
}

/* --- SSS (eg/faq) -------------------------------------------------------- */
.eg-faq { display: flex; flex-direction: column; gap: 12px; }
.eg-faq__item { background: var(--eg-color-surface-default); border: 1px solid var(--eg-color-border-default); border-radius: 12px; }
.eg-faq__item + .eg-faq__item { margin-top: 0; }
.eg-faq__q { display: flex; align-items: center; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; font: var(--eg-type-label-md); color: var(--eg-color-text-primary); border-radius: 12px; }
.eg-faq__q::-webkit-details-marker { display: none; }
.eg-faq__q > span { flex: 1 1 0; min-width: 0; }
.eg-faq__chev { flex: none; color: var(--eg-color-text-secondary); transition: transform var(--eg-motion-base) var(--eg-ease); }
.eg-faq__item[open] .eg-faq__chev { transform: rotate(180deg); }
.eg-faq__item[open] .eg-faq__q { padding-bottom: 10px; }
.eg-faq__a { padding: 0 20px 18px; font: var(--eg-type-body-sm); color: var(--eg-color-text-secondary); }
.eg-faq__a p { margin: 0; }
.eg-faq__a p + p { margin-top: 8px; }

/* --- Metin içi ilgili rehber (eg/related-guide) -------------------------- */
.eg-inline-guide { display: flex; align-items: center; gap: 16px; padding: 14px 18px 14px 14px; background: var(--eg-color-surface-default); border: 1px solid var(--eg-color-border-default); border-radius: 14px; box-shadow: var(--eg-shadow-xs); color: inherit; text-decoration: none; transition: border-color var(--eg-motion-fast) var(--eg-ease); }
.eg-inline-guide:hover { border-color: var(--eg-color-border-brand); }
.eg-inline-guide__img { flex: none; width: 82px; height: 62px; border-radius: 10px; object-fit: cover; }
.eg-inline-guide__img--icon { display: inline-flex; align-items: center; justify-content: center; background: var(--eg-color-surface-brand-soft); color: var(--eg-color-brand-primary); }
.eg-inline-guide__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.eg-inline-guide__label { font: var(--eg-type-label-xs); letter-spacing: var(--eg-tracking-label-xs); color: var(--eg-color-brand-primary); text-transform: uppercase; }
.eg-inline-guide__title { font: var(--eg-type-label-md); color: var(--eg-color-text-primary); }
.eg-inline-guide__meta { display: inline-flex; align-items: center; gap: 6px; font: var(--eg-type-body-xs); color: var(--eg-color-text-muted); }
.eg-inline-guide__arrow { flex: none; color: var(--eg-color-brand-primary); }

/* --- Rehber özeti (eg/guide-summary) ------------------------------------- */
.eg-summary { display: flex; flex-direction: column; gap: 14px; }
.eg-summary__outcome { margin: 0; font: var(--eg-type-body-md); color: var(--eg-color-text-secondary); }
.eg-summary__label { font-weight: 700; color: var(--eg-color-text-primary); }
.eg-summary__label::after { content: ":"; }
.eg-summary__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 0; }
.eg-summary__fact { display: grid; grid-template-columns: 24px 1fr; column-gap: 14px; align-items: center; padding: 18px; background: var(--eg-color-background-subtle); border-radius: 12px; }
.eg-summary__fact .eg-icon { grid-row: 1 / span 2; color: var(--eg-color-brand-primary); }
.eg-summary__fact dt { font: var(--eg-type-label-sm); color: var(--eg-color-text-primary); }
.eg-summary__fact dd { margin: 2px 0 0; font: var(--eg-type-body-sm); color: var(--eg-color-text-secondary); }
.eg-summary__fact--wide { grid-column: 1 / -1; }

/* --- Kaynaklar / güncelleme notu ----------------------------------------- */
.eg-sources { padding: 18px 20px; background: var(--eg-color-surface-default); border: 1px solid var(--eg-color-border-default); border-radius: 14px; }
.eg-sources__title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: var(--eg-type-label-md); color: var(--eg-color-text-primary); }
.eg-sources__title svg { color: var(--eg-color-brand-primary); }
.eg-sources__list { margin: 0; padding-left: 1.4em; font: var(--eg-type-body-sm); color: var(--eg-color-text-secondary); }
.eg-sources__list li + li { margin-top: 6px; }
.eg-sources__list a { color: var(--eg-color-text-link); }
.eg-sources__host { margin-left: 6px; font: var(--eg-type-body-xs); color: var(--eg-color-text-muted); }
.eg-update-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; padding: 12px 16px; background: var(--eg-color-surface-muted); border-radius: 10px; font: var(--eg-type-body-sm); color: var(--eg-color-text-secondary); }
.eg-update-note > svg { align-self: center; color: var(--eg-color-brand-primary); }
.eg-update-note__label { font: var(--eg-type-label-sm); color: var(--eg-color-text-primary); }

/* Mobil */
@media (max-width: 767px) {
	.eg-quick-answer { gap: 14px; padding: 20px 18px 22px 16px; }
	.eg-quick-answer__icon svg { width: 28px; height: 28px; }
	.eg-quick-answer__text, .eg-callout__text, .eg-checklist__item { font: var(--eg-type-mobile-body); }
	.eg-callout { gap: 14px; padding: 18px 18px 20px 16px; }
	.eg-compare { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.eg-compare__card { padding: 20px 18px; gap: 14px; }
	.eg-compare__icon { width: 44px; height: 44px; }
	.eg-summary__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.eg-summary__fact { padding: 14px; column-gap: 10px; }
	.eg-steps--list { padding: 18px; }
	.eg-steps__item { gap: 14px; }
	.eg-steps--cards .eg-steps__list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.eg-steps--cards .eg-steps__item { padding: 16px; }
	.eg-faq__q { padding: 16px; align-items: flex-start; }
	.eg-faq__a { padding: 0 16px 16px; }
}