/* /tools sayfası: sitenin renk ve yazı değişkenlerini kullanır (main.css) */
:root {
  --t-field-bg: light-dark(#fff, #202020);
  --t-soft: light-dark(#f6f6f4, #232323);
  --t-ok: light-dark(#1e7a3c, #7fd1a1);
  --t-warn: light-dark(#a35c00, #f2b35b);
  --t-bad: light-dark(#b42318, #f28b82);
  --t-serp-link: light-dark(#1a0dab, #99c3ff);
  --t-serp-text: light-dark(#4d5156, #bdc1c6);
  --t-serp-bg: light-dark(#fff, #202124);
  --t-h: 38px;
}

.tools { margin: 40px 0 60px }
.tools [hidden] { display: none !important }
/* ana CSS box-sizing vermiyor: kenar boşluğu ve çerçeve genişliğe dahil olsun, kutular taşmasın */
.tools *, .tools *::before, .tools *::after { box-sizing: border-box }
.tools-head .article-title a { color: var(--text-color); text-decoration: none; border: 0 }
.tools-lede { margin: .5em 0 0; color: var(--meta-color) }

.tool-back { margin: 22px 0 18px; font-size: 15px }
.tool-back a { color: var(--meta-color); text-decoration: none }
.tool-back a:hover { color: var(--text-color) }
.tool-index { margin-top: 30px }

.tool-index-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 26px }
@media (max-width: 620px) { .tool-index-grid { grid-template-columns: 1fr } }
.tool-index-group { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--meta-color); margin: 0 0 10px }
.tool-card { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-color); text-decoration: none }
.tool-card:hover { border-color: var(--text-color) }
.tool-card:last-child:nth-child(odd) { grid-column: 1 / -1 }
.tool-card-name { font-weight: 700; font-size: 1.05em }
.tool-card-desc { color: var(--meta-color); font-size: .92em; line-height: 1.45 }

.tool-title { font-size: 1.5em; font-weight: 700; margin: 0 0 .3em; line-height: 1.3 }
.tool-title:focus { outline: none }
.tool-intro { color: var(--meta-color); margin: 0 0 22px; line-height: 1.6 }
.tool code, .notes code { font-family: var(--mono); font-size: .9em; background: var(--code-inline-bg); padding: 0 .3em }

.form-grid { display: grid; gap: 16px; margin-bottom: 20px }
.form-grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
@media (max-width: 700px) { .form-grid.two { grid-template-columns: 1fr } }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px }
.field label, .field-head label, .inline-field { font-size: 14px; font-weight: 700 }
.gap-top { margin-top: 10px }
.req { font-weight: 400; font-size: 12px; color: var(--meta-color); margin-left: 4px }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px }
.field-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.field-row.inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px }
@media (max-width: 620px) { .field-row, .field-row.three { grid-template-columns: 1fr } }

.tool input[type=text], .tool input[type=url], .tool input[type=date], .tool input[type=number], .tool select, .tool textarea {
  width: 100%; min-width: 0; font: 15px var(--font-family); color: var(--text-color); background: var(--t-field-bg);
  border: 1px solid var(--border-color); border-radius: 5px; padding: 0 10px; margin: 0
}
.tool input[type=text], .tool input[type=url], .tool input[type=date], .tool input[type=number], .tool select { height: var(--t-h) }
.tool textarea { padding: 9px 10px; line-height: 1.5; resize: vertical }
.tool textarea.mono { font-family: var(--mono); font-size: 13.5px }
.tool input:focus, .tool select:focus, .tool textarea:focus { outline: 2px solid var(--text-color); outline-offset: -1px }
.inline-field { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap }
.inline-field select, .inline-field input { width: auto }
.inline-field input[type=number] { width: 84px }
.tool input[type=date] { width: auto }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--text-color) }

.count { font: 13px var(--mono); color: var(--meta-color); font-variant-numeric: tabular-nums; white-space: nowrap }
.count.ok { color: var(--t-ok) }
.count.warn { color: var(--t-warn) }
.count.bad { color: var(--t-bad); font-weight: 600 }
.meter { height: 4px; background: var(--t-soft); border-radius: 2px; overflow: hidden }
.meter span { display: block; height: 100%; width: 0; background: var(--t-ok); transition: width .15s }
.meter span.warn { background: var(--t-warn) }
.meter span.bad { background: var(--t-bad) }
@media (prefers-reduced-motion: reduce) { .meter span { transition: none } }

.seg { display: inline-flex; border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden }
.seg button { height: 32px; padding: 0 14px; border: 0; border-left: 1px solid var(--border-color); background: transparent; color: var(--text-color); font: 14px var(--font-family); cursor: pointer }
.seg button:first-child { border-left: 0 }
.seg button.on { background: var(--text-color); color: var(--bg-color) }
.out-tabs { margin: 4px 0 10px }

.btn-ghost, .btn-copy, .row-del { height: 32px; padding: 0 12px; border-radius: 5px; border: 1px solid var(--border-color); background: transparent; color: var(--text-color); font: 14px var(--font-family); cursor: pointer }
.btn-ghost:hover, .btn-copy:hover, .row-del:hover { border-color: var(--text-color) }
.btn-copy.done { background: var(--text-color); color: var(--bg-color) }
.tool button:focus-visible { outline: 2px solid var(--text-color); outline-offset: 2px }

.notes { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 6px }
.notes:empty { display: none }
.notes li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 14.5px; line-height: 1.5; padding: 8px 12px; border-radius: 5px; background: var(--t-soft) }
.notes li::before { font-weight: 700; text-align: center }
.notes li > span { min-width: 0; overflow-wrap: anywhere }
.notes li.ok::before { content: "✓"; color: var(--t-ok) }
.notes li.warn::before { content: "!"; color: var(--t-warn) }
.notes li.bad::before { content: "✕"; color: var(--t-bad) }
.notes li.info::before { content: "i"; color: var(--meta-color); font-style: italic }

.out { margin-top: 4px }
.out-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; font-weight: 700; font-size: 14px }
.code { margin: 0; padding: 14px 16px; background: #272822; color: #f8f8f2; border-radius: 5px; overflow: auto; font: 13.5px/1.6 var(--mono); white-space: pre; max-height: 420px; tab-size: 4 }
.code.wrap { white-space: pre-wrap; word-break: break-all }
.code:focus-visible { outline: 2px solid var(--text-color); outline-offset: 2px }

.table-scroll { overflow-x: auto; margin-bottom: 16px }
.result-table { width: 100%; border-collapse: collapse; font-size: 14.5px }
.result-table th { text-align: left; font-weight: 700; border-bottom: 2px solid var(--border-color); padding: 6px 10px 6px 0 }
.result-table td { border-bottom: 1px solid var(--border-color); padding: 8px 10px 8px 0; vertical-align: top }
.result-table td:first-child { font-family: var(--mono); font-size: 13.5px; word-break: break-all }
.result-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }
.result-table .ok { color: var(--t-ok); font-weight: 700 }
.result-table .bad { color: var(--t-bad); font-weight: 700 }
.result-table .rule { font-family: var(--mono); font-size: 13px; color: var(--meta-color) }
.result-table td:last-child { text-align: right; white-space: nowrap }
#robots-results td:last-child { text-align: left; white-space: normal }
.result-table .warn-t { color: var(--t-warn); font-weight: 700 }
.result-table td.txt { text-align: left; white-space: normal; font-family: var(--mono); font-size: 13.5px; word-break: break-all }
#gsc-table td:nth-child(2):not(.num), #log-top td:last-child:not(.num) { text-align: left; white-space: normal }

.hl-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px }
.hl-row { display: grid; grid-template-columns: 110px 90px minmax(0, 1fr) 32px; gap: 8px; align-items: center }
.hl-row .row-del { width: 32px; padding: 0 }
.hl-head { font-size: 13px; font-weight: 700; color: var(--meta-color) }
@media (max-width: 620px) { .hl-row { grid-template-columns: 1fr 1fr 32px } .hl-row input[type=url] { grid-column: 1 / 3 } }

.rep { display: flex; flex-direction: column; gap: 10px }
.rep-item { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 8px; align-items: start; padding: 12px; border: 1px dashed var(--border-color); border-radius: 5px }
.rep-item .form-grid { margin: 0; gap: 10px }

.serp-frame { background: var(--t-serp-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 22px 24px; margin-bottom: 16px; overflow: hidden }
.serp-result { max-width: 600px; font-family: Arial, sans-serif }
.serp-frame[data-device="mobile"] { max-width: 400px }
.serp-site { display: flex; align-items: center; gap: 12px; margin-bottom: 6px }
.serp-fav { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--t-soft); border: 1px solid var(--border-color); display: grid; place-items: center; font: 700 12px Arial, sans-serif; color: var(--text-color) }
.serp-site-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3 }
.serp-site-text > span:first-child { font-size: 14px; color: var(--text-color) }
.serp-crumb { font-size: 12px; color: var(--t-serp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.serp-title { font-size: 20px; line-height: 1.3; color: var(--t-serp-link); margin-bottom: 4px; white-space: nowrap; overflow: hidden }
.serp-frame[data-device="mobile"] .serp-title { font-size: 18px; white-space: normal }
.serp-desc { font-size: 14px; line-height: 1.58; color: var(--t-serp-text) }
.serp-date { color: var(--meta-color) }
.serp-title:empty::before { content: "Your title will appear here"; opacity: .45 }

/* ---------- link önizleme ---------- */
.og-previews { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px }
@media (max-width: 700px) { .og-previews { grid-template-columns: 1fr } }
.og-card { border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; background: var(--t-field-bg); font-family: Arial, sans-serif }
.og-img { background: var(--t-soft) center / cover no-repeat; display: grid; place-items: center; color: var(--meta-color); font-size: 13px }
.og-card.large .og-img { aspect-ratio: 1.91 / 1 }
.og-card.small { display: grid; grid-template-columns: 110px minmax(0, 1fr) }
.og-card.small .og-img { aspect-ratio: 1 / 1; height: 100% }
.og-body { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; min-width: 0 }
.og-host { font-size: 12px; color: var(--meta-color); text-transform: lowercase }
.og-t { font-size: 15px; font-weight: 700; color: var(--text-color); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.og-d { font-size: 13px; color: var(--meta-color); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }

/* ---------- kelime sayacı ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-bottom: 18px }
.stat { border: 1px solid var(--border-color); border-radius: 6px; padding: 10px 12px }
.stat b { display: block; font-size: 1.4em; line-height: 1.2; font-variant-numeric: tabular-nums }
.stat span { font-size: 13px; color: var(--meta-color) }

/* ---------- regex ---------- */
.field-label { font-size: 14px; font-weight: 700 }
.rx-list { list-style: none; margin: 0; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 5px; min-height: 100%; font: 13.5px/1.9 var(--mono) }
.rx-list li { display: flex; justify-content: space-between; gap: 10px }
.rx-list li.hit { color: var(--t-ok) }
.rx-list li.miss { color: var(--meta-color) }
.rx-list mark { background: light-dark(#fff1b8, #5c4a00); color: inherit; border-radius: 2px }
#rx-presets .btn-ghost { height: 30px; font-size: 13px }

.tool-intro.small { font-size: 14px; margin: 0 0 10px }
.tool-intro.small:empty { display: none }
.muted { color: var(--meta-color) }
.small { font-size: 13px }

/* ---------- dosya bırakma alanı ---------- */
.drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 16px; margin-bottom: 16px; border: 2px dashed var(--border-color); border-radius: 8px; text-align: center; cursor: pointer; font-size: 15px }
.drop:hover, .drop.drag { border-color: var(--text-color); background: var(--t-soft) }
.drop .muted { font-size: 13px }

/* ---------- log: günlük grafik ---------- */
.chart-days { display: flex; align-items: flex-end; gap: 2px; height: 120px; margin: 0 0 18px; border-bottom: 1px solid var(--border-color) }
.chart-days:empty { display: none }
.chart-days .d { flex: 1; min-width: 2px; background: var(--text-color); opacity: .75; border-radius: 2px 2px 0 0 }
.chart-days .d:hover { opacity: 1 }

/* ---------- okunabilirlik ---------- */
.read-score { display: flex; align-items: center; gap: 16px; margin-bottom: 14px }
.read-score:empty { display: none }
.read-score .num-big { font-size: 2.6em; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums }
.read-score .band { font-weight: 700 }
.read-score .scale { flex: 1; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #b42318, #a35c00 35%, #7a8a00 55%, #1e7a3c 80%); position: relative }
.read-score .scale i { position: absolute; top: -4px; width: 3px; height: 16px; background: var(--text-color); border-radius: 2px }
.rd-text { line-height: 1.8; padding: 14px 16px; border: 1px solid var(--border-color); border-radius: 6px; margin-bottom: 16px }
.rd-text:empty { display: none }
.rd-text p { margin: 0 0 .8em }
.rd-text p:last-child { margin-bottom: 0 }
.rd-text .long { background: light-dark(#fff1b8, #4d3f00) }
.rd-text .very-long { background: light-dark(#ffd6d1, #5c1f1a) }
.rd-text .word-long { text-decoration: underline wavy var(--t-warn); text-underline-offset: 3px }

/* ---------- kaynak kod raporu ---------- */
.src-section { margin-bottom: 20px }
.src-section h3 { font-size: 1.05em; font-weight: 700; margin: 0 0 8px }
.kv { width: 100%; border-collapse: collapse; font-size: 14.5px }
.kv th { text-align: left; width: 170px; padding: 7px 10px 7px 0; vertical-align: top; color: var(--meta-color); font-weight: 400; border-bottom: 1px solid var(--border-color) }
.kv td { padding: 7px 0; border-bottom: 1px solid var(--border-color); overflow-wrap: anywhere }
.outline { list-style: none; margin: 0; padding: 0; font-size: 14.5px }
.outline li { padding: 3px 0; overflow-wrap: anywhere }
.outline .tag { display: inline-block; min-width: 30px; font: 600 12px var(--mono); color: var(--meta-color) }
.outline .skip { color: var(--t-bad) }
.kv .ok { color: var(--t-ok); font-weight: 700 }
.kv .bad, .wp-meta .bad { color: var(--t-bad); font-weight: 700 }
.kv code { font-size: 13px; word-break: break-all }

/* ---------- güvenlik başlıkları ---------- */
.sec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px }
@media (max-width: 620px) { .sec-grid { grid-template-columns: 1fr } }
.sec-box { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 10px 14px 14px; border: 1px solid var(--border-color); border-radius: 6px; min-width: 0 }
.sec-box.wide { grid-column: 1 / -1 }
.sec-box legend { padding: 0 6px; font-weight: 700; font-size: 14px }

/* ---------- WebP ---------- */
.wp-list { display: flex; flex-direction: column; gap: 10px }
.wp-item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--border-color); border-radius: 6px }
.wp-item img { width: 72px; height: 72px; object-fit: cover; border-radius: 4px; background: var(--t-soft) }
.wp-name { font: 13.5px var(--mono); overflow-wrap: anywhere }
.wp-meta { font-size: 13px; color: var(--meta-color); font-variant-numeric: tabular-nums }
.wp-meta b { color: var(--t-ok) }
.wp-item a.btn-copy { display: inline-flex; align-items: center; text-decoration: none }
input[type=range] { accent-color: var(--text-color) }