/* MTC Quiz — temadan bağımsız temel tasarım. Temalar --mtcq-* değişkenleriyle özelleştirir. */
.mtcq {
	--mtcq-bg: var(--wp--preset--color--night, #0a0a0a);
	--mtcq-panel: var(--wp--preset--color--night-2, #151515);
	--mtcq-fg: #fff;
	--mtcq-muted: rgba(255, 255, 255, .7);
	--mtcq-accent: var(--wp--preset--color--accent, #f0bba4);
	--mtcq-accent-fg: #000;
	--mtcq-brand: var(--wp--preset--color--primary, #42a988);
	--mtcq-line: rgba(255, 255, 255, .14);
	--mtcq-display: var(--wp--preset--font-family--outfit, var(--wp--preset--font-family--titillium, system-ui, sans-serif));
	--mtcq-body: var(--wp--preset--font-family--outfit, var(--wp--preset--font-family--plex, system-ui, sans-serif));
	--mtcq-mono: var(--wp--preset--font-family--outfit, system-ui, sans-serif);
	--mtcq-radius: 0px;
	position: relative; background: var(--mtcq-bg); color: var(--mtcq-fg); font-family: var(--mtcq-body);
	padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 72px); margin-inline: auto; max-width: 1360px; box-sizing: border-box;
}
.mtcq *, .mtcq *::before, .mtcq *::after { box-sizing: border-box; }
.mtcq .mtcq__eyebrow { font-family: var(--mtcq-mono); font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--mtcq-accent); margin: 0 0 16px; }
.mtcq .mtcq__title { font-family: var(--mtcq-display); font-weight: 800; font-size: clamp(32px, 4.6vw, 64px); line-height: .95; text-transform: uppercase; letter-spacing: -.02em; color: var(--mtcq-fg); margin: 0 0 22px; max-width: 16ch; }
.mtcq .mtcq__intro-text { font-size: 18px; line-height: 1.6; color: var(--mtcq-muted); max-width: 60ch; }
.mtcq__intro-text p { margin: 0 0 1em; color: inherit !important; }
.mtcq__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 380px)); gap: 16px; margin: 28px 0 8px; align-items: start; }
.mtcq__field { margin: 0; display: grid; gap: 6px; align-content: start; }
.mtcq .mtcq__field label { font-family: var(--mtcq-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mtcq-muted); }
.mtcq__field input { width: 100%; height: 54px; background: transparent; border: 2px solid var(--mtcq-line); border-radius: var(--mtcq-radius); color: var(--mtcq-fg); padding: 14px 16px; font: inherit; font-size: 17px; transition: border-color .2s; }
.mtcq__field input:focus { outline: none; border-color: var(--mtcq-accent); }
.mtcq .mtcq__field small { font-size: 13px; color: var(--mtcq-muted); }
.mtcq .mtcq__meta { font-family: var(--mtcq-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mtcq-muted); margin: 18px 0 22px; }

/* Butonlar */
.mtcq__btn { display: inline-flex; align-items: center; gap: 8px; border: 2px solid transparent; border-radius: var(--mtcq-radius); padding: 15px 24px 14px; font-family: var(--mtcq-display); font-weight: 700; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; line-height: 1; cursor: pointer; text-decoration: none; transition: background-color .2s, color .2s, border-color .2s, transform .2s, opacity .2s; background: transparent; color: var(--mtcq-fg); }
.mtcq__btn--primary { background: var(--mtcq-accent); color: var(--mtcq-accent-fg); border-color: var(--mtcq-accent); }
.mtcq__btn--primary:hover { background: var(--mtcq-fg); border-color: var(--mtcq-fg); color: var(--mtcq-accent-fg); transform: translateY(-2px); }
.mtcq__btn--ghost { border-color: var(--mtcq-line); }
.mtcq__btn--ghost:hover { border-color: var(--mtcq-fg); }
.mtcq__btn:not(.mtcq__btn--primary):not(.mtcq__btn--ghost) { border-color: var(--mtcq-line); }
.mtcq__btn:not(.mtcq__btn--primary):not(.mtcq__btn--ghost):hover { border-color: var(--mtcq-fg); }
.mtcq__btn[disabled] { opacity: .35; cursor: not-allowed; transform: none; }
.mtcq__btn svg { flex: none; }

/* Adımlar */
.mtcq--js .mtcq__step { display: none; }
.mtcq--js .mtcq__step.is-active { display: block; }
.mtcq__step.is-anim { animation: mtcq-in .45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes mtcq-in { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 28px)); } to { opacity: 1; transform: none; } }
.mtcq__q { border: 0; margin: 0; padding: 0; min-width: 0; }
.mtcq .mtcq__question { display: block; width: 100%; padding: 0; margin: 0 0 22px; font-family: var(--mtcq-display); font-weight: 700; font-size: clamp(22px, 2.6vw, 36px); line-height: 1.08; text-transform: uppercase; letter-spacing: -.01em; color: var(--mtcq-fg); max-width: 26ch; outline: none; }
.mtcq .mtcq__num { display: block; font-family: var(--mtcq-mono); font-size: 13px; letter-spacing: .18em; color: var(--mtcq-accent); margin-bottom: 12px; }
.mtcq .mtcq__hint { font-family: var(--mtcq-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mtcq-muted); margin: -8px 0 18px; }
.mtcq__progress { display: flex; align-items: center; gap: 18px; margin: 0 0 32px; }
.mtcq__progress[hidden] { display: none; }
.mtcq__bar { flex: 1; height: 4px; background: var(--mtcq-line); overflow: hidden; }
.mtcq__bar span { display: block; height: 100%; background: var(--mtcq-brand); transition: width .4s cubic-bezier(.2, .7, .2, 1); }
.mtcq .mtcq__count { margin: 0; font-family: var(--mtcq-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mtcq-muted); white-space: nowrap; }

/* Seçenekler */
.mtcq__options { display: grid; gap: 10px; max-width: 760px; }
.mtcq__options--dense { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); max-width: none; }
.mtcq__option { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; background: var(--mtcq-panel); border: 2px solid var(--mtcq-line); border-radius: var(--mtcq-radius); cursor: pointer; font-size: 17px; line-height: 1.4; transition: border-color .2s, background-color .2s, transform .2s; }
.mtcq__option:hover { border-color: rgba(255, 255, 255, .45); transform: translateX(3px); }
.mtcq__option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mtcq__mark { flex: none; width: 24px; height: 24px; margin-top: 1px; border: 2px solid var(--mtcq-line); display: grid; place-items: center; color: #fff; transition: background-color .2s, border-color .2s; }
.mtcq__mark svg { width: 14px; height: 14px; opacity: 0; transition: opacity .15s; }
.mtcq__option input[type="radio"] + .mtcq__mark { border-radius: 50%; }
.mtcq__option:has(input:checked) { border-color: var(--mtcq-brand); background: rgba(66, 169, 136, .12); }
.mtcq__option:has(input:checked) .mtcq__mark { background: var(--mtcq-brand); border-color: var(--mtcq-brand); }
.mtcq__option:has(input:checked) .mtcq__mark svg { opacity: 1; }
.mtcq__option:has(input:focus-visible) { outline: 2px solid var(--mtcq-accent); outline-offset: 3px; }
.mtcq__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.mtcq:not(.mtcq--js) .mtcq__nav [data-mtcq-back], .mtcq:not(.mtcq--js) .mtcq__nav [data-mtcq-next], .mtcq:not(.mtcq--js) .mtcq__start { display: none; }
.mtcq:not(.mtcq--js) .mtcq__q { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--mtcq-line); }

/* Sonuç */
.mtcq__result-head { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; margin-bottom: clamp(32px, 5vw, 56px); }
.mtcq__ring { position: relative; width: clamp(160px, 22vw, 240px); aspect-ratio: 1; display: grid; place-items: center; }
.mtcq__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.mtcq__ring-bg { fill: none; stroke: var(--mtcq-line); stroke-width: 8; }
.mtcq__ring-fg { fill: none; stroke: var(--mtcq-brand); stroke-width: 8; stroke-linecap: butt; stroke-dasharray: var(--circ); stroke-dashoffset: var(--circ); animation: mtcq-ring 1.4s cubic-bezier(.2, .7, .2, 1) .3s forwards; }
@keyframes mtcq-ring { to { stroke-dashoffset: var(--dash); } }
.mtcq__ring strong { font-family: var(--mtcq-display); font-weight: 800; font-size: clamp(44px, 5.6vw, 72px); line-height: 1; letter-spacing: -.04em; color: var(--mtcq-fg); }
.mtcq__ring strong span { font-size: .45em; letter-spacing: 0; color: var(--mtcq-accent); }
.mtcq .mtcq__level { font-family: var(--mtcq-display); font-weight: 800; font-size: clamp(36px, 5.2vw, 80px); line-height: .95; text-transform: uppercase; letter-spacing: -.02em; color: var(--mtcq-fg); margin: 0 0 14px; }
.mtcq .mtcq__correct { font-family: var(--mtcq-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--mtcq-accent); margin: 0 0 12px; }
.mtcq .mtcq__level-text { font-size: 18px; line-height: 1.55; color: var(--mtcq-muted); max-width: 52ch; margin: 0; }
.mtcq__badge-wrap { display: grid; grid-template-columns: minmax(220px, 360px) 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--mtcq-line); background: var(--mtcq-panel); }
.mtcq__badge { margin: 0; }
.mtcq__badge img { display: block; width: 100%; height: auto; background: #fff; animation: mtcq-badge 1s cubic-bezier(.2, .7, .2, 1) .6s both; }
@keyframes mtcq-badge { from { opacity: 0; transform: scale(.85) rotate(-6deg); } to { opacity: 1; transform: none; } }
.mtcq .mtcq__badge figcaption { font-family: var(--mtcq-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mtcq-muted); margin-top: 12px; text-align: center; }
.mtcq__actions { display: flex; flex-wrap: wrap; gap: 12px; align-self: start; }
.mtcq .mtcq__note { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; margin: 0; font-size: 15px; color: var(--mtcq-muted); }
.mtcq__note svg { color: var(--wp--preset--color--primary, #42a988); flex: none; }
.mtcq__review { margin-top: 40px; border-top: 1px solid var(--mtcq-line); padding-top: 18px; }
.mtcq .mtcq__review summary { cursor: pointer; font-family: var(--mtcq-display); font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: .04em; list-style: none; display: flex; align-items: center; gap: 12px; }
.mtcq__review summary::-webkit-details-marker { display: none; }
.mtcq__review summary::before { content: '+'; color: var(--mtcq-brand); font-size: 28px; line-height: 1; }
.mtcq__review[open] summary::before { content: '−'; }
.mtcq__review ol { margin: 20px 0 0; padding-left: 0; list-style: none; display: grid; gap: 14px; }
.mtcq__review > ol > li { padding: 14px 18px; border-left: 3px solid var(--mtcq-line); background: var(--mtcq-panel); }
.mtcq__review > ol > li.is-correct { border-left-color: var(--wp--preset--color--primary, #42a988); }
.mtcq__review > ol > li.is-wrong { border-left-color: #e0523f; }
.mtcq__review > ol > li.is-partial { border-left-color: var(--mtcq-accent); }
.mtcq__review > ol > li > p { margin: 0 0 6px; font-weight: 600; color: var(--mtcq-fg) !important; }
.mtcq .mtcq__review ul { margin: 0; padding-left: 18px; color: var(--mtcq-muted); font-size: 15px; }

@media (max-width: 782px) {
	.mtcq__result-head, .mtcq__badge-wrap { grid-template-columns: 1fr; }
	.mtcq__ring { margin-inline: auto; }
	.mtcq__nav { flex-direction: column-reverse; }
	.mtcq__nav .mtcq__btn { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .mtcq__step.is-anim, .mtcq__ring-fg, .mtcq__badge img { animation: none; } .mtcq__ring-fg { stroke-dashoffset: var(--dash); } }

/* Editör önizlemesi */
.mtcq-editor { background: #0a0a0a; color: #fff; padding: 24px; }
.mtcq-editor__eyebrow { font-size: 11px; letter-spacing: .22em; color: #f0bba4; margin: 0 0 8px; }
.mtcq-editor h3 { color: #fff; margin: 0 0 12px; }
.mtcq-editor .components-card { color: #1e1e1e; }

/* Açık tema (beyaz zemin) */
.mtcq--light, .mtcq.is-light {
	--mtcq-bg: #fff; --mtcq-panel: #f3f2ef; --mtcq-fg: #000; --mtcq-muted: #4a4a4a; --mtcq-line: rgba(0, 0, 0, .16); --mtcq-accent-fg: #000;
}
.mtcq--light .mtcq__option:hover, .mtcq.is-light .mtcq__option:hover { border-color: rgba(0, 0, 0, .45); }
.mtcq--light .mtcq__ring-bg, .mtcq.is-light .mtcq__ring-bg { stroke: rgba(0, 0, 0, .1); }
.mtcq--light .mtcq__btn--ghost, .mtcq.is-light .mtcq__btn--ghost { border-color: rgba(0, 0, 0, .25); }
.mtcq--light .mtcq__btn:not(.mtcq__btn--primary):not(.mtcq__btn--ghost), .mtcq.is-light .mtcq__btn:not(.mtcq__btn--primary):not(.mtcq__btn--ghost) { border-color: rgba(0, 0, 0, .25); }
/* Açık zeminde etiketler mint-koyu (somon beyazda zayıf kalır) */
.page-content .mtcq .mtcq__eyebrow, .page-content .mtcq .mtcq__correct, .page-content .mtcq .mtcq__num, .page-content .mtcq .mtcq__hint, .page-content .mtcq .mtcq__count, .page-content .mtcq .mtcq__meta,
.mtcq--light .mtcq__eyebrow, .mtcq--light .mtcq__correct, .mtcq--light .mtcq__num { color: #2f8f70; }
.page-content .mtcq .mtcq__ring strong span { color: #2f8f70; }

/* ---------- Ölçek düzeltmesi: daha sakin, okunur quiz ---------- */
.mtcq { padding: clamp(32px, 5vw, 64px) clamp(20px, 5vw, 72px); }
.mtcq .mtcq__title { font-size: clamp(26px, 2.8vw, 38px); font-weight: 700; line-height: 1.05; letter-spacing: -.01em; max-width: 22ch; text-transform: none; }
.mtcq .mtcq__intro-text { font-size: 17px; max-width: 62ch; }
.mtcq .mtcq__question { font-size: clamp(19px, 1.9vw, 25px); font-weight: 600; line-height: 1.3; letter-spacing: 0; text-transform: none; max-width: 62ch; margin-bottom: 18px; }
.mtcq .mtcq__num { font-size: 12px; margin-bottom: 10px; }
.mtcq__q, .mtcq__progress { max-width: 720px; }
.mtcq__options { max-width: 720px; gap: 8px; }
.mtcq__options--dense { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.mtcq__option { padding: 13px 16px; font-size: 16px; line-height: 1.35; }
.mtcq__mark { width: 22px; height: 22px; }
.mtcq__nav { justify-content: flex-start; margin-top: 22px; }
.mtcq__btn { font-size: 14px; padding: 13px 20px 12px; }
.mtcq .mtcq__level { font-size: clamp(28px, 3.6vw, 52px); font-weight: 700; line-height: 1; }
.mtcq__ring { width: clamp(140px, 16vw, 180px); }
.mtcq__ring strong { font-size: clamp(38px, 4vw, 54px); }
.mtcq .mtcq__level-text { font-size: 16px; }
.mtcq__result-head { margin-bottom: clamp(24px, 4vw, 40px); }
.mtcq__badge-wrap { grid-template-columns: minmax(200px, 300px) 1fr; }
@media (max-width: 782px) { .mtcq__nav { flex-direction: row; } .mtcq__nav .mtcq__btn { flex: 1; } }
