/* MS SEO Araçları — temanın font ve renklerini devralır.
   Vurgu rengini değiştirmek için Görünüm > Özelleştir > Ek CSS bölümüne şunu ekleyin:
   .msat-app, .msat-hub { --msat-accent: #e11d48; }  */

.msat-app,
.msat-hub {
	--msat-accent: var(--wp--preset--color--primary, #2563eb);
	--msat-line: rgba(127, 127, 127, .35);
	--msat-soft: rgba(127, 127, 127, .09);
	--msat-ok: #15803d;
	--msat-warn: #b45309;
	--msat-bad: #b91c1c;
	font: inherit;
	color: inherit;
	line-height: 1.55;
	box-sizing: border-box;
}
.msat-app *, .msat-hub * { box-sizing: border-box; }

.msat-desc { margin: 0 0 1.25rem; max-width: 70ch; opacity: .85; }

.msat-form { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 1rem; }
.msat-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.msat-field.wide { grid-column: 1 / -1; }
.msat-field > label, .msat-label { font-weight: 600; font-size: .95em; }
.msat-field small { opacity: .7; }

.msat-app input[type=text],
.msat-app input[type=url],
.msat-app input[type=number],
.msat-app select,
.msat-app textarea {
	width: 100%;
	font: inherit;
	color: inherit;
	background: transparent;
	border: 1px solid var(--msat-line);
	border-radius: 6px;
	padding: .6rem .75rem;
	margin: 0;
}
.msat-app textarea { min-height: 9rem; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; line-height: 1.5; }
.msat-app select option { color: #111; }
.msat-app input:focus-visible,
.msat-app select:focus-visible,
.msat-app textarea:focus-visible,
.msat-btn:focus-visible { outline: 2px solid var(--msat-accent); outline-offset: 2px; }

.msat-checks { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: 1rem; }
.msat-check { display: flex; gap: .55rem; align-items: flex-start; cursor: pointer; }
.msat-check input { margin-top: .3rem; flex: none; }

.msat-btn {
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid var(--msat-accent);
	background: var(--msat-accent);
	color: #fff;
	border-radius: 6px;
	padding: .6rem 1.1rem;
	line-height: 1.2;
}
.msat-btn:hover { filter: brightness(1.08); }
.msat-btn[disabled] { opacity: .55; cursor: wait; }
.msat-btn.ghost { background: transparent; color: inherit; border-color: var(--msat-line); padding: .4rem .75rem; font-weight: 500; }
.msat-btn.ghost:hover { border-color: var(--msat-accent); filter: none; }

.msat-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.msat-row .msat-field { flex: 1 1 280px; }

.msat-out { border: 1px solid var(--msat-line); border-radius: 8px; overflow: hidden; margin-top: 1rem; }
.msat-out-bar { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem .75rem; background: var(--msat-soft); border-bottom: 1px solid var(--msat-line); flex-wrap: wrap; }
.msat-out-bar span { display: flex; gap: .4rem; flex-wrap: wrap; }
.msat-out textarea { border: 0 !important; border-radius: 0 !important; min-height: 12rem; }

.msat-stat { font-size: .92em; opacity: .85; margin-top: .5rem; }

.msat-serp { border: 1px solid var(--msat-line); border-radius: 8px; padding: 1rem; margin: 0 0 1rem; max-width: 640px; }
.msat-serp-url { font-size: .85em; opacity: .75; overflow-wrap: anywhere; }
.msat-serp-title { font-size: 1.2em; color: var(--msat-accent); margin: .15rem 0; line-height: 1.3; }
.msat-serp-desc { font-size: .92em; opacity: .9; }
.msat-count { font-size: .85em; }
.msat-count.warn { color: var(--msat-warn); }
.msat-count.bad { color: var(--msat-bad); }
.msat-count.ok { color: var(--msat-ok); }

/* Sonuç paneli */
.msat-res { margin-top: 1.5rem; }
.msat-res-head { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.msat-score { font-size: 2.4rem; font-weight: 700; line-height: 1; }
.msat-score small { display: block; font-size: .35em; font-weight: 500; opacity: .8; margin-top: .3rem; }
.msat-score.ok { color: var(--msat-ok); }
.msat-score.warn { color: var(--msat-warn); }
.msat-score.bad { color: var(--msat-bad); }
.msat-sum { display: grid; gap: .25rem .9rem; grid-template-columns: auto 1fr; margin: 0 0 1rem; font-size: .93em; }
.msat-sum dt { font-weight: 600; }
.msat-sum dd { margin: 0; overflow-wrap: anywhere; }
.msat-list { list-style: none; margin: 0 0 1.5rem; padding: 0; border: 1px solid var(--msat-line); border-radius: 8px; }
.msat-list li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .6rem; padding: .65rem .85rem; border-top: 1px solid var(--msat-line); margin: 0; }
.msat-list li:first-child { border-top: 0; }
.msat-ico { font-weight: 700; text-align: center; }
.msat-list .ok .msat-ico { color: var(--msat-ok); }
.msat-list .warn .msat-ico { color: var(--msat-warn); }
.msat-list .bad .msat-ico { color: var(--msat-bad); }
.msat-list .info .msat-ico { opacity: .6; }
.msat-list strong { display: block; }
.msat-list span.d { opacity: .85; font-size: .93em; overflow-wrap: anywhere; }
.msat-tbl-title { font-size: 1.05em; margin: 1.5rem 0 .5rem; }
.msat-tbl { overflow-x: auto; border: 1px solid var(--msat-line); border-radius: 8px; }
.msat-tbl table { width: 100%; border-collapse: collapse; margin: 0; font-size: .9em; }
.msat-tbl th, .msat-tbl td { text-align: left; padding: .5rem .7rem; border-top: 1px solid var(--msat-line); vertical-align: top; overflow-wrap: anywhere; border-left: 0; border-right: 0; }
.msat-tbl th { background: var(--msat-soft); border-top: 0; white-space: nowrap; }
.msat-tbl a { color: var(--msat-accent); }
.msat-err { border: 1px solid var(--msat-bad); color: var(--msat-bad); border-radius: 8px; padding: .75rem 1rem; margin-top: 1rem; }
.msat-wait { margin-top: 1rem; opacity: .8; }

/* Anahtar kelimeler */
.msat-chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: .75rem; margin: 0; list-style: none; }
.msat-chips li { margin: 0; border: 1px solid var(--msat-line); border-radius: 999px; padding: .2rem .7rem; font-size: .9em; }

/* Araç listesi */
.msat-hub-title { margin: 2rem 0 .25rem; }
.msat-hub-sub { margin: 0 0 1rem; opacity: .8; }
.msat-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.msat-card { display: flex; flex-direction: column; gap: .35rem; border: 1px solid var(--msat-line); border-radius: 8px; padding: 1rem; text-decoration: none; color: inherit; }
.msat-card:hover, .msat-card:focus-visible { border-color: var(--msat-accent); }
.msat-card strong { color: var(--msat-accent); }
.msat-card span { font-size: .92em; opacity: .85; }

@media (prefers-reduced-motion: no-preference) {
	.msat-btn, .msat-card { transition: border-color .15s, filter .15s; }
}

/* Tek sayfada tüm araçlar */
.msat-all { --msat-accent: var(--wp--preset--color--primary, #2563eb); --msat-line: rgba(127, 127, 127, .35); --msat-soft: rgba(127, 127, 127, .09); font: inherit; color: inherit; box-sizing: border-box; }
.msat-all * { box-sizing: border-box; }
.msat-all .msat-app { --msat-accent: var(--wp--preset--color--primary, #2563eb); }
.msat-tool { border: 1px solid var(--msat-line); border-radius: 8px; margin: 0 0 .6rem; scroll-margin-top: 90px; }
.msat-tool[open] { border-color: var(--msat-accent); }
.msat-tool > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; align-items: center; padding: .85rem 1rem; }
.msat-tool > summary::-webkit-details-marker { display: none; }
.msat-tool > summary::after { content: ""; grid-column: 2; grid-row: 1 / span 2; width: .55rem; height: .55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .6; transition: transform .15s; }
.msat-tool[open] > summary::after { transform: rotate(-135deg); }
.msat-tool > summary:hover .msat-tool-t, .msat-tool > summary:focus-visible .msat-tool-t { color: var(--msat-accent); }
.msat-tool > summary:focus-visible { outline: 2px solid var(--msat-accent); outline-offset: 2px; border-radius: 8px; }
.msat-tool-t { margin: 0 !important; padding: 0 !important; font-size: 1.05em !important; line-height: 1.3 !important; }
.msat-tool-d { grid-column: 1; font-size: .92em; opacity: .8; }
.msat-tool > .msat-app { padding: 0 1rem 1.25rem; border-top: 1px solid var(--msat-line); padding-top: 1rem; }
@media (prefers-reduced-motion: reduce) { .msat-tool > summary::after { transition: none; } }
