/* ---------- Design tokens ---------- */
:root {
  --bg: #f4f6fb;
  --bg-elevated: #ffffff;
  --bg-subtle: #eef1f8;
  --border: #dde3ee;
  --text: #1b2130;
  --text-muted: #5b6472;
  --text-faint: #8891a0;

  --accent: #4f5eff;
  --accent-2: #7c3aed;
  --accent-soft: #eef0ff;

  --ok: #16a34a;
  --ok-bg: #e8f8ee;
  --ok-border: #bbecc9;
  --warn: #d97706;
  --warn-bg: #fff6e6;
  --warn-border: #f6dfa8;
  --crit: #dc2626;
  --crit-bg: #fdecec;
  --crit-border: #f6c3c1;
  --info: #2563eb;
  --info-bg: #eaf1ff;
  --info-border: #c8dcfb;

  --shadow-sm: 0 1px 2px rgba(20, 24, 40, .06);
  --shadow-md: 0 8px 24px rgba(20, 24, 40, .08);
  --shadow-lg: 0 16px 48px rgba(20, 24, 40, .14);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  /* Gradyan kahraman — acik tema */
  --hero-bg: radial-gradient(120% 130% at 8% 0%, #e9e6ff 0%, #f1f3fb 46%, #f7f8fc 100%);
  --hero-glow: radial-gradient(circle, rgba(124,58,237,.16), transparent 62%);
  --hero-line: #dfe3f0;
  --glass-bg: rgba(255,255,255,.72);
  --glass-line: rgba(20,24,40,.08);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

[data-theme="dark"] {
  --bg: #10121c;
  --bg-elevated: #181b29;
  --bg-subtle: #1f2333;
  --border: #2b3044;
  --text: #eef0f8;
  --text-muted: #a6adc0;
  --text-faint: #6d7488;

  --accent: #7c86ff;
  --accent-2: #a684f7;
  --accent-soft: #232849;

  --ok: #4ade80;
  --ok-bg: #113321;
  --ok-border: #1e5c37;
  --warn: #fbbf24;
  --warn-bg: #3a2c0d;
  --warn-border: #6b4f10;
  --crit: #f87171;
  --crit-bg: #3a1616;
  --crit-border: #6b2323;
  --info: #60a5fa;
  --info-bg: #132a4d;
  --info-border: #1e4a7d;

  /* Gradyan kahraman — koyu tema */
  --hero-bg: radial-gradient(120% 130% at 8% 0%, #2b2170 0%, #171a2e 46%, #12141f 100%);
  --hero-glow: radial-gradient(circle, rgba(168,85,247,.30), transparent 62%);
  --hero-line: #2f3450;
  --glass-bg: rgba(255,255,255,.045);
  --glass-line: rgba(255,255,255,.09);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #10121c;
    --bg-elevated: #181b29;
    --bg-subtle: #1f2333;
    --border: #2b3044;
    --text: #eef0f8;
    --text-muted: #a6adc0;
    --text-faint: #6d7488;

    --accent: #7c86ff;
    --accent-2: #a684f7;
    --accent-soft: #232849;

    --ok: #4ade80;
    --ok-bg: #113321;
    --ok-border: #1e5c37;
    --warn: #fbbf24;
    --warn-bg: #3a2c0d;
    --warn-border: #6b4f10;
    --crit: #f87171;
    --crit-bg: #3a1616;
    --crit-border: #6b2323;
    --info: #60a5fa;
    --info-bg: #132a4d;
    --info-border: #1e4a7d;

    /* Gradyan kahraman — koyu tema */
    --hero-bg: radial-gradient(120% 130% at 8% 0%, #2b2170 0%, #171a2e 46%, #12141f 100%);
    --hero-glow: radial-gradient(circle, rgba(168,85,247,.30), transparent 62%);
    --hero-line: #2f3450;
    --glass-bg: rgba(255,255,255,.045);
    --glass-line: rgba(255,255,255,.09);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, .5);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; }
button { font-family: inherit; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner { display: flex; align-items: center; gap: 14px; padding: 14px 24px; max-width: 1180px; margin: 0 auto; }
/* The brand is an <a> (it links home), and this stylesheet has no global
   rule for anchors, so the browser default applied: the name and the tagline
   under it were both underlined and painted in the UA link colour. Inheriting
   colour and clearing the decoration puts it back to reading as a wordmark.
   The hover affordance is carried by opacity instead, so it still shows it is
   clickable without underlining two lines of text. */
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 17px; letter-spacing: -0.01em;
  color: inherit; text-decoration: none;
  transition: opacity 0.15s ease;
}
.brand:hover { opacity: 0.75; }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.brand-mark svg { width: 18px; height: 18px; }
.brand small { display: block; font-weight: 500; color: var(--text-muted); font-size: 11.5px; margin-top: 1px; }
.topbar-spacer { flex: 1; }
.privacy-pill {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--ok);
  background: var(--ok-bg); border: 1px solid var(--ok-border);
  padding: 6px 11px; border-radius: 999px; font-weight: 600;
}
.privacy-pill svg { width: 13px; height: 13px; }
/* Dil değiştirici (EN/TR) — topbar */
.lang-switch {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
  background: var(--bg-elevated);
}
.lang-switch button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 7px 10px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.lang-switch button + button { border-left: 1px solid var(--border); }
.lang-switch button:hover { color: var(--text); }
.lang-switch button.active { background: var(--accent); color: #fff; }

/* Analiz aracından tanıtım sayfasına dönüş */
.back-home { white-space: nowrap; }
@media (max-width: 720px) {
  .back-home span { display: none; }
  .privacy-pill { display: none; }
}

.link-external {
  display: inline-block; margin-top: 6px; font-size: 11.5px; font-weight: 600;
  color: var(--accent); text-decoration: none;
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 7px;
}
.link-external:hover { border-color: var(--accent); }

.link-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.link-count {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 100px; padding: 1px 8px; white-space: nowrap;
}
.issue-n { font-size: 11px; font-weight: 700; opacity: .7; }

/* Sekmeler: 8 sekme dar ekranda sığmıyor. Kaydırma korunur ama çubuk gizlenir;
   iyice daralınca etiketler düşer, ikonlar kalır (başlık olarak ad verilir). */
.tabs { scrollbar-width: none; -ms-overflow-style: none; }
.tabs::-webkit-scrollbar { display: none; }
@media (max-width: 860px) {
  .tab-btn { padding: 11px 10px; }
  .tab-btn span[data-i18n] { display: none; }
  .tab-btn { gap: 0; }
}

/* Kural motoru çıktısı — hangi kuralın ne kadar etkilediği görünür olmalı */
.rule-list { display: flex; flex-direction: column; gap: 7px; }
.rule-row {
  display: grid; grid-template-columns: auto auto 1fr; gap: 9px; align-items: start;
  font-size: 12.5px; line-height: 1.5;
}
.rule-id {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  color: var(--text-faint); background: var(--bg-subtle);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; white-space: nowrap;
}
.rule-weight {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rule-weight.crit { color: var(--crit); }
.rule-weight.warn { color: var(--warn); }
.rule-weight.low  { color: var(--text-faint); }
.rule-text { color: var(--text-muted); }
.rule-total {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  border-radius: 100px; padding: 2px 9px; cursor: help;
}
.rule-total.crit { color: var(--crit); background: var(--crit-bg); }
.rule-total.warn { color: var(--warn); background: var(--warn-bg); }
.rule-total.low  { color: var(--text-muted); background: var(--bg-subtle); }

/* İçerik & bağlantı kartları */
.link-list { display: flex; flex-direction: column; gap: 10px; }
.link-card {
  border: 1px solid var(--border); border-left-width: 3px;
  border-radius: var(--radius-sm); padding: 11px 13px; background: var(--bg-subtle);
}
.link-crit { border-left-color: var(--crit); }
.link-warn { border-left-color: var(--warn); }
.link-info { border-left-color: var(--border); }
.link-href {
  display: block; font-family: var(--font-mono); font-size: 11.5px;
  color: var(--text); word-break: break-all; user-select: all;
}
.link-anchor { margin-top: 5px; font-size: 12px; color: var(--text-muted); word-break: break-word; }
.link-issues { margin-top: 7px; display: flex; flex-direction: column; gap: 4px; }
.link-issue { font-size: 12px; line-height: 1.5; }
.link-issue.crit { color: var(--crit); font-weight: 600; }
.link-issue.warn { color: var(--warn); }
.link-issue.info { color: var(--text-muted); }
.link-issue.ok { color: var(--ok); font-size: 12px; font-weight: 600; }

/* Yayınlanan DNS kayıtlarının ham gösterimi */
.dns-record { margin-bottom: 12px; }
.dns-record:last-child { margin-bottom: 0; }
.dns-record-head {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 5px;
}
.dns-record-raw {
  display: block; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6;
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 9px 11px; color: var(--text); word-break: break-all; user-select: all;
}
.dns-record-note {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 7px; font-size: 12px; font-weight: 600;
}
.dns-record-note code { font-size: 11.5px; padding: 1px 6px; border-radius: 4px; background: var(--bg-elevated); border: 1px solid var(--border); }
.dns-record-note.ok { color: var(--ok); }
.dns-record-note.warn { color: var(--warn); }
.dns-record-note.crit { color: var(--crit); }
.dns-record-tags { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.dns-tag-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.dns-tag-k { color: var(--text-muted); font-weight: 600; }
.dns-tag-row code { font-size: 11.5px; word-break: break-all; }

/* Sürüm rozeti — package.json'dan gelir (scripts/sync-version.mjs) */
.footer-version {
  display: inline-block;
  margin-left: 10px;
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}

/* DKIM imza kartlari — bir mesajda birden fazla imza olabilir */
.sig-list { display: flex; flex-direction: column; gap: 10px; }
.sig-card {
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 9px;
  padding: 12px 14px;
  background: var(--bg-subtle);
}
.sig-ok      { border-left-color: var(--ok); }
.sig-warn    { border-left-color: var(--warn); }
.sig-crit    { border-left-color: var(--crit); }
.sig-neutral { border-left-color: var(--border); }
.sig-head {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.sig-domain {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text);
  word-break: break-all;
}
.sig-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}
.sig-meta code {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11.5px;
}
.sig-align { font-weight: 600; }
.sig-align-ok { color: var(--ok); }
.sig-align-warn { color: var(--warn); }
.sig-align-crit { color: var(--crit); }
.sig-align-neutral { color: var(--text-muted); }
.sig-carrier {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 1px 6px;
  cursor: help;
}
.sig-sub {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
  word-break: break-all;
}
.sig-headers { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sig-count {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 0 7px;
  vertical-align: 2px;
}

.align-rel {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  vertical-align: 1px;
}

.icon-btn {
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg-elevated);
  color: var(--text-muted); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s ease;
}
.icon-btn:hover { color: var(--text); border-color: var(--accent); box-shadow: var(--shadow-sm); }
.icon-btn svg { width: 17px; height: 17px; }

/* ---------- Hero / input ---------- */
.hero { padding: 40px 0 8px; }
.hero h1 { font-size: 28px; margin: 0 0 6px; letter-spacing: -0.02em; }
.hero p { color: var(--text-muted); margin: 0 0 24px; max-width: 640px; }

.input-card {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: 18px; position: relative;
}
.input-card.dragover { outline: 2px dashed var(--accent); outline-offset: -6px; }
textarea#headerInput {
  width: 100%; min-height: 220px; resize: vertical;
  background: var(--bg-subtle); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 14px 16px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6;
  outline: none;
}
textarea#headerInput:focus { border-color: var(--accent); }
textarea#headerInput::placeholder { color: var(--text-faint); }

.input-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: 10px; padding: 10px 16px; font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text);
  cursor: pointer; transition: all .15s ease;
}
.btn svg { width: 15px; height: 15px; }
.btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: none;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 45%, transparent);
}
.btn-primary:hover { color: #fff; filter: brightness(1.06); transform: translateY(-1px); }
.btn-ghost { background: transparent; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.toolbar-spacer { flex: 1; }
.file-hint { font-size: 12px; color: var(--text-faint); }

/* ---------- Feature strip (landing state) ---------- */
.feature-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px;
  margin-top: 20px;
}
.feature-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 14px 16px; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease;
}
.feature-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.feature-item b { display: block; font-size: 13px; font-weight: 700; }
.feature-item span { display: block; font-size: 11.5px; color: var(--text-faint); margin-top: 2px; line-height: 1.4; }
.feature-icon {
  width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.feature-icon svg { width: 18px; height: 18px; }
.feature-icon-ok { background: var(--ok-bg); color: var(--ok); }
.feature-icon-info { background: var(--info-bg); color: var(--info); }
.feature-icon-warn { background: var(--warn-bg); color: var(--warn); }
.feature-icon-accent { background: var(--accent-soft); color: var(--accent); }

/* ---------- Results shell ---------- */
#results { padding: 28px 0 80px; display: none; }
#results.visible { display: block; }

.summary-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px; margin-bottom: 22px;
}
.summary-item {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 14px 16px;
}
.summary-item .label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); font-weight: 700; margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }
.summary-icon { display: inline-flex; color: var(--accent); }
.summary-icon svg { width: 13px; height: 13px; }
.summary-item .value { font-size: 13.5px; word-break: break-word; }
.summary-item .value.mono { font-family: var(--font-mono); font-size: 12px; }

/* ---------- Score + auth grid ---------- */
.top-grid { display: grid; grid-template-columns: 260px 1fr; gap: 18px; margin-bottom: 22px; }
@media (max-width: 860px) { .top-grid { grid-template-columns: 1fr; } }

.score-card {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 22px; display: flex; flex-direction: column; align-items: center; text-align: center;
}
.score-card h3 { margin: 0 0 14px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); }
.gauge-wrap { position: relative; width: 150px; height: 150px; }
.gauge-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge-track { fill: none; stroke: var(--bg-subtle); stroke-width: 12; }
.gauge-fill { fill: none; stroke-width: 12; stroke-linecap: round; transition: stroke-dasharray .8s cubic-bezier(.4,0,.2,1); }
.gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gauge-grade { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; }
.gauge-score { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.risk-tag { margin-top: 14px; padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.network-note { margin-top: 10px; font-size: 11px; color: var(--text-faint); line-height: 1.5; }

.auth-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 640px) { .auth-grid { grid-template-columns: 1fr; } }
.auth-card {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 15px 16px; box-shadow: var(--shadow-sm);
}
.auth-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.auth-card-name { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.auth-mini-icon { width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.auth-mini-icon svg { width: 13px; height: 13px; }
.state-ok .auth-mini-icon { background: var(--ok-bg); color: var(--ok); }
.state-warn .auth-mini-icon { background: var(--warn-bg); color: var(--warn); }
.state-crit .auth-mini-icon { background: var(--crit-bg); color: var(--crit); }
.state-neutral .auth-mini-icon { background: var(--bg-subtle); color: var(--text-faint); }
.auth-pill {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  padding: 3px 10px 3px 8px; border-radius: 999px; white-space: nowrap; text-transform: lowercase;
}
.auth-pill .pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.auth-pill.pill-ok { background: var(--ok-bg); color: var(--ok); }
.auth-pill.pill-warn { background: var(--warn-bg); color: var(--warn); }
.auth-pill.pill-crit { background: var(--crit-bg); color: var(--crit); }
.auth-pill.pill-neutral { background: var(--bg-subtle); color: var(--text-faint); }
.auth-card-detail { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }
.auth-card-detail code { background: var(--bg-subtle); padding: 1px 5px; border-radius: 5px; font-size: 11.5px; }
.align-row { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.align-row svg { width: 14px; height: 14px; flex-shrink: 0; }
.align-row.aligned { color: var(--ok); }
.align-row.misaligned { color: var(--crit); }

/* ---------- Export bar ---------- */
.export-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.export-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); font-weight: 700; margin-right: 2px; }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10, 12, 20, .55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); width: 100%; max-width: 520px; max-height: 85vh;
  display: flex; flex-direction: column; padding: 20px 22px;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-desc { font-size: 12.5px; color: var(--text-muted); margin: 8px 0 12px; line-height: 1.55; }
.modal-actions-top { display: flex; gap: 8px; margin-bottom: 10px; }
.modal-actions-top .btn { padding: 5px 10px; font-size: 12px; }
.pdf-sections { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 2px; margin: 0 -6px; padding: 0 6px; }
.pdf-section-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: 10px; cursor: pointer; font-size: 13px; transition: background .12s ease;
}
.pdf-section-row:hover { background: var(--bg-subtle); }
.pdf-section-row input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.modal-status { font-size: 12px; color: var(--text-faint); flex: 1; }
.modal-status.error { color: var(--crit); }

/* ---------- Tabs ---------- */
.tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--border);
  margin-bottom: 20px; overflow-x: auto;
}
.tab-btn {
  background: none; border: none; border-top: none; border-left: none; border-right: none;
  padding: 11px 13px; font-size: 13.5px; font-weight: 600;
  color: var(--text-muted); cursor: pointer;
  border-bottom: 2.5px solid transparent; white-space: nowrap;
  display: flex; align-items: center; gap: 7px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
/* İkonlar HTML'de zaten vardı; sekmeyi ilk bakışta ayırt edilebilir kılmak için görünür yapıldı. */
.tab-btn svg {
  width: 16px; height: 16px; flex: none;
  opacity: .75; transition: opacity .15s ease;
}
.tab-btn:hover { color: var(--text); background: var(--bg-subtle); }
.tab-btn:hover svg { opacity: 1; }
.tab-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tab-btn.active {
  color: var(--accent); border-bottom-color: var(--accent); font-weight: 700;
  background: var(--bg-subtle);
}
.tab-btn.active svg { opacity: 1; }
.tab-badge {
  background: none; color: var(--text-faint); font-size: 12px; font-weight: 600;
  padding: 0;
}
.tab-btn.active .tab-badge { color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadein .25s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Kimlik dogrulama karti — kompakt anahtar/deger satirlari.
   align-items:start olmasaydi kartlar soldaki skor kartinin boyuna gerilir ve
   icerigin uc kati bos alan olusurdu. */
/* Skor karti auth kartlarini germesin... */
.top-grid { align-items: start; }
/* ...ama auth kartlari birbirine hizalansin: satirin alt kenari duzgun olsun. */
.auth-grid { align-items: stretch; }

.auth-rows { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.auth-row {
  display: grid; grid-template-columns: minmax(88px, auto) 1fr; gap: 10px;
  align-items: baseline; font-size: 12.5px;
  padding-top: 7px; border-top: 1px solid var(--border);
}
.auth-row:first-child { padding-top: 0; border-top: 0; }
.auth-k { color: var(--text-faint); font-size: 11.5px; }
.auth-v { text-align: right; min-width: 0; }
/* Alan adlari dar sutunda kelime ortasindan bolunuyordu ("...com.t / r").
   Bu satir alt alta gecer ve deger tam genisligi kullanir. */
.auth-row-stack { grid-template-columns: 1fr; gap: 3px; }
.auth-row-stack .auth-v { text-align: left; overflow-wrap: anywhere; }
.auth-domain { font-size: 11px; }
.auth-yes, .auth-no {
  display: inline-flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap;
}
.auth-yes { color: var(--ok); }
.auth-no  { color: var(--crit); }
.auth-yes svg, .auth-no svg { width: 13px; height: 13px; }
.auth-neutral { color: var(--text-faint); font-size: 11.5px; }
.auth-rel {
  display: block; margin-top: 2px;
  font-size: 10.5px; font-weight: 600; color: var(--text-muted);
}
.auth-empty { font-size: 12px; color: var(--text-faint); padding-top: 7px; }

/* ============ Gradyan kahraman alani ============
   Skor ve kimlik dogrulama kartlari, gradyan bir zemin uzerinde cam yuzeyler
   olarak durur. Gorsel etki icerikte degil sunumda: metinler ve rozetler
   olculu kalir, gradyan bir iddia tasimaz. */
.hero-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hero-line);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 22px;
  background: var(--hero-bg);
}
.hero-glow {
  position: absolute;
  inset: -45% 45% 45% -12%;
  background: var(--hero-glow);
  filter: blur(30px);
  pointer-events: none;
}
.hero-panel .top-grid { position: relative; margin-bottom: 0; }

/* Kahraman icindeki skor karti cerceveden arindirilir */
.hero-panel .score-card {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Cam yuzeyler */
.hero-panel .auth-card,
.warn-item {
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Bulgu kartlari: solda ince renk seridi, seviyeyi tasir */
.warn-item {
  border-radius: var(--radius-md);
  position: relative;
  padding-left: 16px;
  overflow: hidden;
}
.warn-item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--text-faint);
}
.warn-item.level-critical::before { background: var(--crit); }
.warn-item.level-warning::before  { background: var(--warn); }
.warn-item.level-info::before     { background: var(--accent); }
.warn-item.level-ok::before       { background: var(--ok); }

/* Kimlik durumu rozetleri kahraman icinde biraz daha canli */
.hero-panel .auth-pill { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* Yazdirmada gradyan ve cam kaldirilir; kagitta okunurluk esastir */
@media print {
  .hero-panel { background: none !important; border-color: #ddd !important; }
  .hero-glow { display: none !important; }
  .hero-panel .auth-card, .warn-item { background: #fff !important; backdrop-filter: none !important; }
}

/* Teknik sekmesi — paneller birbirine gerilmesin.
   Iki sutunlu grid varsayilan olarak satirdaki en uzun panele hizaliyor, bu da
   tek imzalik DKIM panelinin altinda ekran boyu bosluk birakiyordu.
   masonry benzeri davranis icin sutunlar bagimsiz akar. */
.tech-grid { align-items: start; }
.tech-grid > .panel { align-self: start; }

/* Uzun deger satirlari (List-Unsubscribe, h= listesi) etiketin altina gecer;
   yan yana kaldiginda daracik bir sutunda okunmaz hale geliyordu. */
.kv-row { flex-wrap: wrap; }
.kv-row .v { flex: 1 1 240px; min-width: 0; }

/* DKIM imza kartindaki h= listesi cok uzun olabiliyor ve karti domine ediyor.
   Uc satira kirpilir, uzerine gelince tamami gorunur. */
.sig-headers {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; cursor: help;
}
.sig-headers:hover, .sig-headers:focus-visible {
  -webkit-line-clamp: unset; overflow: visible;
}

/* ---------- Teknik sekmesi: tipografi ---------- */

/* Panel basliklari eskiden 13px, soluk ve tum panellerde ayni agirliktaydi;
   goz nereye bakacagini bulamiyordu. Artik solda ince bir accent isaretiyle
   ayirt ediliyor ve kontrasti bir kademe yukseldi. */
.panel h4 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-muted);
}
.panel h4::before {
  content: ""; width: 3px; height: 13px; border-radius: 2px;
  background: var(--accent); flex: none; opacity: .85;
}

/* Satir ritmi: etiket sabit sutunda, deger saga yaslanmadan akiyor. */
.kv-row {
  align-items: baseline;
  padding: 8px 0;
  font-size: 13px;
}
.kv-row .k {
  min-width: 148px;
  font-size: 12px;
  color: var(--text-faint);
  line-height: 1.5;
}
/* Monospace yalnizca teknik tanimlayicilar icin. Duz metin degerler
   (evet/hayir, iliski etiketleri) normal yazi tipiyle daha okunur. */
.kv-row .v {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
}
.kv-row .v-prose {
  font-family: var(--font-sans);
  font-size: 13px;
  font-variant-numeric: normal;
}
.kv-row .v code { font-size: 12px; }

/* Ilgili panellerde sayisal degerler hizali dursun */
.kv-row .v { font-variant-numeric: tabular-nums; }

/* ---------- Warnings list ---------- */
.warn-list { display: flex; flex-direction: column; gap: 10px; }
.warn-item {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-md);
  border: 1px solid; font-size: 13.5px;
}
.warn-item.level-ok { background: var(--ok-bg); border-color: var(--ok-border); color: var(--text); }
.warn-item.level-info { background: var(--info-bg); border-color: var(--info-border); color: var(--text); }
.warn-item.level-warning { background: var(--warn-bg); border-color: var(--warn-border); color: var(--text); }
.warn-item.level-critical { background: var(--crit-bg); border-color: var(--crit-border); color: var(--text); }

/* Canli yon: seviye rengi UC yerde birden kodlanmasin. Arka plan tonu ve
   kenarlik yerine tek bir sol serit tasir; kart cam yuzey olur. Ikon rengi
   korunur, boylece renk korlugunde de seviye ikinci bir isaretle okunur. */
.warn-item.level-ok,
.warn-item.level-info,
.warn-item.level-warning,
.warn-item.level-critical {
  background: var(--glass-bg);
  border-color: var(--glass-line);
  color: var(--text);
}
.warn-item svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.warn-item.level-ok svg { color: var(--ok); }
.warn-item.level-info svg { color: var(--info); }
.warn-item.level-warning svg { color: var(--warn); }
.warn-item.level-critical svg { color: var(--crit); }

/* ---------- Delivery path (timeline) ---------- */
.timeline {
  display: flex; flex-direction: column;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 4px 16px; box-shadow: var(--shadow-sm);
}
.hop-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.hop-row:last-child { border-bottom: none; }
.hop-status { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.hop-status svg { width: 17px; height: 17px; }
.hop-status.ok { color: var(--ok); }
.hop-status.warn { color: var(--warn); }
.hop-status.origin { color: var(--accent); }
.hop-main { flex: 1; min-width: 0; }
.hop-route { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hop-route .hop-arrow { color: var(--text-faint); font-weight: 400; margin: 0 4px; }
.hop-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hop-meta-inline { font-size: 12px; color: var(--text-faint); white-space: nowrap; flex-shrink: 0; text-align: right; }
.hop-meta-inline b { color: var(--text-muted); font-weight: 600; }
.hop-meta-inline.slow b, .hop-meta-inline.veryslow { color: var(--warn); }
.chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; background: var(--bg-subtle); color: var(--text-muted);
}
.chip.chip-delay { background: var(--info-bg); color: var(--info); }
.chip.chip-delay.slow { background: var(--warn-bg); color: var(--warn); }
.chip.chip-delay.veryslow { background: var(--crit-bg); color: var(--crit); }
.chip.chip-tls-on { background: var(--ok-bg); color: var(--ok); }
.chip.chip-tls-off { background: var(--bg-subtle); color: var(--text-faint); }
.chip svg { width: 11px; height: 11px; }
.empty-state { text-align: center; padding: 50px 20px; color: var(--text-muted); }
.empty-state svg { width: 40px; height: 40px; margin: 0 auto 12px; color: var(--text-faint); }

/* ---------- Raw headers ---------- */
.raw-toolbar { display: flex; gap: 10px; margin-bottom: 12px; align-items: center; flex-wrap: wrap; }
.raw-search {
  flex: 1; min-width: 180px; background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 12px; font-size: 13px; color: var(--text); outline: none;
}
.raw-search:focus { border-color: var(--accent); }
.raw-block {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden;
}
.raw-line {
  display: flex; gap: 12px; padding: 7px 14px; font-family: var(--font-mono); font-size: 12px;
  border-bottom: 1px solid var(--border); align-items: baseline;
}
.raw-line:last-child { border-bottom: none; }
.raw-line:hover { background: var(--bg-subtle); }
.raw-line .rn { color: var(--text-faint); width: 26px; flex-shrink: 0; text-align: right; user-select: none; }
.raw-line .rk { color: var(--accent); font-weight: 700; flex-shrink: 0; }
.raw-line .rv { color: var(--text-muted); word-break: break-all; }
.raw-line.dim { opacity: .35; }
mark { background: color-mix(in srgb, var(--warn) 45%, transparent); color: inherit; border-radius: 3px; }

/* ---------- Technical / alignment diagram ---------- */
.tech-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 860px) { .tech-grid { grid-template-columns: 1fr; } }
.panel { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-sm); }
/* Kahraman alanindaki cam dili panellere de tasinir. .panel tanimindan SONRA
   gelmeli; once yazilirsa asagidaki kural bunu eziyor. */
.panel { background: var(--glass-bg); border-color: var(--glass-line); }
/* Tipografi yukaridaki "Teknik sekmesi" blogunda; buradaki eski bildirim
   onu eziyordu, kaldirildi. */
.kv-list { display: flex; flex-direction: column; gap: 8px; }
/* Temel yerlesim. Tipografi ayrintilari yukaridaki "Teknik sekmesi" blogunda;
   buradaki eski font/boyut bildirimleri onlari eziyordu, kaldirildi. */
.kv-row { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.kv-row:last-child { border-bottom: none; }
.kv-row .k { flex-shrink: 0; }
.kv-row .v { word-break: break-word; }

/* ---------- Forefront AntiSpam report ---------- */
.panel-full { grid-column: 1 / -1; }
.ff-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.ff-title { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15.5px; }
.ff-icon { width: 26px; height: 26px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ff-icon svg { width: 15px; height: 15px; }
.ff-desc { margin: 4px 0 16px; font-size: 12.5px; color: var(--text-muted); }
.ff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 14px; }
.ff-field { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.ff-field-wide { grid-column: 1 / -1; }
.ff-label { font-size: 11px; color: var(--text-faint); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: 5px; margin-bottom: 6px; }
.ff-label svg { width: 12px; height: 12px; cursor: help; }
.ff-value { font-size: 13.5px; font-family: var(--font-mono); word-break: break-all; }
.ff-value code { background: var(--bg-elevated); padding: 1px 5px; border-radius: 5px; }
.ff-badge { display: inline-flex; align-items: center; font-weight: 700; font-size: 12px; padding: 3px 10px; border-radius: 999px; cursor: help; font-family: var(--font-sans); }
.ff-badge.ok { background: var(--ok-bg); color: var(--ok); }
.ff-badge.warn { background: var(--warn-bg); color: var(--warn); }
.ff-badge.crit { background: var(--crit-bg); color: var(--crit); }
.ff-badge.neutral { background: var(--bg-elevated); color: var(--text-muted); }
.ff-scl-row { display: flex; align-items: center; gap: 12px; }
.ff-scl-num { font-weight: 800; font-size: 16px; min-width: 22px; }
.ff-scl-bar { position: relative; flex: 1; height: 6px; border-radius: 999px; background: var(--border); }
.ff-scl-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, var(--ok), var(--warn), var(--crit)); }
.ff-scl-dot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--bg-elevated); border: 2px solid var(--accent); transform: translate(-50%, -50%); }
.ff-scl-range { font-size: 11px; color: var(--text-faint); flex-shrink: 0; }
.panel-sub { border-top: 1px dashed var(--border); padding-top: 14px; margin-top: 4px; margin-bottom: 14px; }
.panel-sub-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--text-muted); margin-bottom: 10px; }
.ff-geo-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ff-geo-result { display: flex; align-items: center; gap: 6px; font-size: 12.5px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.ff-geo-result svg { width: 14px; height: 14px; color: var(--text-faint); flex-shrink: 0; }
.ff-source, .ff-unknown { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.ff-source div { padding: 8px 12px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); border-bottom: 1px solid var(--border); word-break: break-all; }
.ff-source div:last-child { border-bottom: none; }
.ff-unknown .raw-line { padding: 6px 12px; }

/* ---------- Tooltip (hover açıklamaları) ---------- */
.tip { position: relative; display: inline-flex; align-items: center; cursor: help; }
.tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--bg-elevated);
  width: max-content; max-width: 280px; padding: 9px 11px; border-radius: 9px;
  font-size: 11.5px; font-weight: 500; line-height: 1.5; letter-spacing: 0;
  text-transform: none; text-align: left; white-space: normal;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transition: opacity .12s ease, visibility .12s ease;
  z-index: 60; pointer-events: none;
}
.tip::before {
  content: ""; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--text);
  opacity: 0; visibility: hidden; transition: opacity .12s ease, visibility .12s ease;
  z-index: 61; pointer-events: none;
}
.tip:hover::after, .tip:hover::before, .tip:focus-visible::after, .tip:focus-visible::before { opacity: 1; visibility: visible; }
.tip svg { width: 12px; height: 12px; color: var(--text-faint); }
.tip:hover svg { color: var(--accent); }
/* ekranın sağ/sol kenarına taşmayı azalt */
.ff-grid > .ff-field:first-child .tip::after { left: 0; transform: none; }
.ff-grid > .ff-field:last-child .tip::after { left: auto; right: 0; transform: none; }

/* ---------- Network checks (opt-in) ---------- */
.net-disclaimer {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-md);
  background: var(--info-bg); border: 1px solid var(--info-border); color: var(--text); font-size: 13px; margin-bottom: 18px;
}
.net-disclaimer svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--info); }
.net-controls { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.net-select {
  flex: 1; min-width: 160px; background: var(--bg-subtle); border: 1px solid var(--border); color: var(--text);
  border-radius: 10px; padding: 9px 12px; font-size: 13px; outline: none;
}
.net-select:focus { border-color: var(--accent); }
.net-target {
  flex: 1; min-width: 160px; background: var(--bg-subtle); border: 1px solid var(--border); color: var(--text);
  border-radius: 10px; padding: 9px 12px; font-size: 13px; font-family: var(--font-mono); display: flex; align-items: center;
}
.net-target.empty { color: var(--text-faint); font-family: var(--font-sans); }
.net-results { display: flex; flex-direction: column; gap: 8px; }
.net-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px;
  background: var(--bg-subtle); border: 1px solid var(--border); font-size: 12.5px;
}
.net-row .net-zone { font-weight: 700; min-width: 130px; }
.net-row .net-status { flex: 1; }
.net-badge { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; }
.net-badge.clean { background: var(--ok-bg); color: var(--ok); }
.net-badge.listed { background: var(--crit-bg); color: var(--crit); }
.net-badge.error { background: var(--bg-elevated); color: var(--text-faint); }
.net-badge svg { width: 12px; height: 12px; }
.net-loading { color: var(--text-faint); font-size: 12.5px; padding: 6px 2px; }
.net-ptr-detail { font-size: 12px; color: var(--text-muted); margin-top: 4px; line-height: 1.6; }
.net-ptr-detail code { background: var(--bg-elevated); padding: 1px 5px; border-radius: 5px; }

/* ---------- Şikayet geri bildirimi / Sağlayıcı hazırlığı ---------- */
.fbl-status { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.fbl-value { font-family: var(--font-mono); font-size: 11.5px; color: var(--text); margin-top: 6px; word-break: break-all; }
.fbl-meaning { font-size: 12px; color: var(--text-faint); margin-top: 5px; line-height: 1.55; }
.net-row .net-status .fbl-value, .net-row .net-status .fbl-meaning { display: block; }
.net-row { align-items: flex-start; }

.provider-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.provider-card {
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 14px 16px; position: relative; overflow: hidden;
}
.provider-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.provider-card.state-signal::before { background: var(--ok); }
.provider-card.state-missing::before { background: var(--crit); }
.provider-card.state-unprovable::before, .provider-card.state-none::before { background: var(--text-faint); }
.provider-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.provider-name { font-weight: 700; font-size: 14px; }
.provider-detail { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }
.provider-notes { margin: 9px 0 0; padding-left: 18px; }
.provider-notes li { font-size: 11.5px; color: var(--warn); line-height: 1.55; margin-bottom: 3px; }

/* ---------- Footer ---------- */
.site-footer { text-align: center; padding: 30px 0 50px; color: var(--text-faint); font-size: 12px; }
.site-footer a { color: inherit; }

/* ---------- Print ---------- */
@media print {
  /* Kullanıcı koyu temadaysa token'lar koyu palete çözülüyor ve kağıt çıktısı
     koyu zeminli/okunmaz oluyordu. Yazdırmada açık paleti zorla geri getir. */
  :root, [data-theme="dark"], :root:not([data-theme="light"]) {
    --bg: #ffffff;
    --bg-elevated: #ffffff;
    --bg-subtle: #f4f6fb;
    --border: #dde3ee;
    --text: #1b2130;
    --text-muted: #5b6472;
    --text-faint: #6b7383;
    --accent: #4f5eff;
    --accent-2: #7c3aed;
    --accent-soft: #eef0ff;
    --ok: #16a34a; --ok-bg: #e8f8ee; --ok-border: #bbecc9;
    --warn: #b45309; --warn-bg: #fff6e6; --warn-border: #f6dfa8;
    --crit: #dc2626; --crit-bg: #fdecec; --crit-border: #f6c3c1;
    --info: #2563eb; --info-bg: #eaf1ff; --info-border: #c8dcfb;
    --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
  }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  .topbar, .hero, .input-card, .input-toolbar, .tabs, .icon-btn,
  .export-bar, .lang-switch,
  .back-home,
  .raw-toolbar, .net-disclaimer, .site-footer, .modal-backdrop { display: none !important; }
  .net-controls, .ff-geo-row { display: none !important; }

  body { background: #fff; }
  .container { max-width: none; padding: 0; }
  #results { display: block !important; padding: 0; }
  .tab-panel { display: block !important; page-break-inside: avoid; margin-bottom: 24px; }
  .panel, .auth-card, .summary-item, .hop-row, .warn-item, .provider-card { break-inside: avoid; }
  @page { margin: 14mm; }
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* Dosya ipucu hata durumu: okunamayan bir bicim sessizce yutulmaz. */
.file-hint.error { color: var(--crit); }

/* ---------- Ornek secici ---------- */

.sample-picker { position: relative; display: inline-flex; }
.sample-caret { width: 13px; height: 13px; margin-left: -2px; opacity: .6; }

.sample-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 70;
  min-width: 340px; max-width: min(420px, calc(100vw - 32px));
  max-height: min(62vh, 520px); overflow-y: auto;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-md);
}
.sample-menu[hidden] { display: none; }

.sample-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 11px; border: 0; border-radius: 8px;
  background: transparent; text-align: left; cursor: pointer;
  font-family: inherit; color: var(--text);
}
.sample-item:hover, .sample-item:focus-visible { background: var(--bg-subtle); }
.sample-item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sample-name { font-size: 13px; font-weight: 600; }
.sample-note { font-size: 11.5px; line-height: 1.5; color: var(--text-faint); }

/* Klasor bilgisi header'da kanitlanmadiginda beyan oldugu belirtilir. */
.sample-claimed {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint); border: 1px dashed var(--border);
  border-radius: 5px; padding: 1px 5px; cursor: help;
}

/* Uygulanmayan gereksinim: gri ve solgun — kirmizi ASLA degil. */
.req-na .req-icon { color: var(--text-faint); opacity: .5; }
.req-na .req-label { color: var(--text-faint); text-decoration: line-through; text-decoration-color: var(--border); }

/* Mesaj sinifi bandi */
.msg-class {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 11px 13px; margin-bottom: 16px;
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 10px;
  font-size: 12.5px; line-height: 1.55; color: var(--text-muted);
}
.msg-class svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--text-faint); }
.msg-class.is-bulk svg { color: var(--accent); }
.msg-class b { font-family: var(--font-mono); font-size: 11.5px; color: var(--text); }
.cls-sub { display: block; margin-top: 3px; color: var(--text-faint); }


/* DMARCbis'te kaldirilan etiketler: gosteriliyor ama gecerli sayilmiyor. */
.dns-tag-row.is-obsolete code { color: var(--text-faint); text-decoration: line-through; text-decoration-color: var(--border); }
.tag-obsolete {
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint); border: 1px dashed var(--border); border-radius: 4px; padding: 0 4px;
}


/* FIX-06: kara liste ozeti — kismi kapsama yesil gosterilmez. */
.net-badge.net-summary { font-weight: 700; }
.net-row-summary { border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 4px; }
.net-zone-detail {
  display: flex; flex-wrap: wrap; gap: 6px 12px;
  padding: 2px 0 10px 2px; margin-bottom: 6px;
  border-bottom: 1px dashed var(--border);
}
.zone-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; }
.zone-chip b { color: var(--text-faint); font-weight: 600; }


/* ---------- Alan adi tutarliligi (APP-04) ---------- */

.ident-lede { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; margin: 0 0 12px; }
.ident-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ident-row {
  display: grid; grid-template-columns: minmax(96px, auto) 1fr auto;
  gap: 10px; align-items: baseline;
  padding: 9px 0; border-top: 1px solid var(--border);
}
.ident-row:first-child { border-top: 0; }
.ident-name { font-size: 11.5px; color: var(--text-faint); }
.ident-host { font-family: var(--font-mono); font-size: 12px; word-break: break-all; }
.ident-none { font-family: var(--font-sans); color: var(--text-faint); font-style: italic; }
.ident-rel { display: flex; align-items: center; gap: 6px; justify-self: end; }
.ident-cousin {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--crit); background: var(--crit-bg); border-radius: 4px; padding: 1px 5px;
}
.ident-note {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 12px; padding: 10px 12px;
  background: var(--warn-bg); border-radius: 9px;
  font-size: 12px; line-height: 1.5; color: var(--text);
}
.ident-note svg { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--warn); }
.ident-src { margin-top: 12px; font-size: 10.5px; color: var(--text-faint); }


/* ---------- Saglayici gereksinim listesi ---------- */

.provider-scope { font-size: 12px; color: var(--text-faint); margin: 2px 0 12px; line-height: 1.5; }
.provider-unverified {
  font-size: 11.5px; color: var(--warn); background: var(--warn-bg);
  border-radius: 6px; padding: 6px 9px; margin-bottom: 12px; line-height: 1.45;
}

.req-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.req-row { display: flex; gap: 9px; align-items: flex-start; }
.req-icon { flex: none; margin-top: 1px; }
.req-icon svg { width: 14px; height: 14px; }
/* Renk tek basina bilgi tasimaz: ikon da durumla birlikte degisir. */
.req-met   .req-icon { color: var(--ok); }
.req-unmet .req-icon { color: var(--crit); }
.req-unknown .req-icon { color: var(--text-faint); }

.req-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.req-label { font-size: 12.5px; line-height: 1.45; }
.req-unknown .req-label { color: var(--text-muted); }
.req-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.req-level {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 4px;
}
.req-must   .req-level { color: var(--crit); background: var(--crit-bg); }
.req-should .req-level { color: var(--warn); background: var(--warn-bg); }
.req-info   .req-level { color: var(--text-faint); background: var(--bg-subtle); }
.req-rfc { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); }
.req-where { font-size: 11px; color: var(--text-faint); font-style: italic; line-height: 1.45; }

.provider-src {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 11px; color: var(--text-faint);
}
.provider-src a { color: var(--accent); }

/* Yardim teklifi yalnizca karsilanmayan sart varken cizilir. */
.help-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  flex-wrap: wrap; margin-top: 20px; padding: 16px 18px;
  border: 1px solid var(--accent); border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-soft), transparent 70%);
}
.help-text { display: flex; flex-direction: column; gap: 3px; }
.help-text b { font-size: 13.5px; }
.help-text span { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }


/* ---------- Durum rozetleri (evet/hayir, pass/fail) ---------- */

/* Bu degerler daha once duz metindi ve satiri tararken hicbir sey
   soylemiyordu. Rozet, anlami renk + ikon + metin olarak tasir; renk tek
   basina bilgi tasimadigindan renk korlugunde de ayirt edilir. */
.state-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px 2px 7px; border-radius: 999px;
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 700;
  letter-spacing: .01em; white-space: nowrap;
  border: 1px solid transparent; vertical-align: 1px;
}
.state-pill svg { width: 12px; height: 12px; flex: none; }
.state-pill.ok      { background: var(--ok-bg);   color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 26%, transparent); }
.state-pill.warn    { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 26%, transparent); }
.state-pill.crit    { background: var(--crit-bg); color: var(--crit); border-color: color-mix(in srgb, var(--crit) 26%, transparent); }
.state-pill.neutral { background: var(--bg-subtle); color: var(--text-muted); border-color: var(--border); }

/* Hizalama modu (aspf / adkim) — kod degeri ve okunur karsiligi bir arada */
.mode-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  margin-right: 8px; padding: 2px 9px;
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 6px;
  font-family: var(--font-sans); font-size: 11.5px; color: var(--text-muted);
}
.mode-chip b { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); font-weight: 700; }

/* ---------- Yatay tasma kalkani ---------- */

/* Tooltip balonu mutlak konumlu ve 280px'e kadar genisleyebiliyor. Gizli
   haldeyken `visibility:hidden` kullaniyoruz; gizli elemanlar hala kaydirma
   tasmasina katkida bulundugu icin sag sutundaki her ipucu sayfayi ~87px
   yana kaydiriyordu. `clip` tasmayi keser ama `hidden`in aksine kaydirma
   baglami olusturmaz, yani sticky/z-index davranisi bozulmaz. */
html, body { overflow-x: clip; }

/* Dar ekranda balon gorunum disina tasmasin; kirpilirsa okunmaz olurdu. */
.tip::after { max-width: min(280px, calc(100vw - 32px)); }

/* ---------- Site menusu ve dar ekran ust cubugu ---------- */

.site-menu-wrap { position: relative; display: inline-flex; }
.site-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 80;
  min-width: 230px; padding: 8px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-md);
}
.site-menu[hidden] { display: none; }
.site-menu-group + .site-menu-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.site-menu-title {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint); padding: 0 8px 5px;
}
.site-menu a {
  display: block; padding: 7px 8px; border-radius: 7px;
  font-size: 13px; color: var(--text); text-decoration: none;
}
.site-menu a:hover { background: var(--bg-subtle); }

/* Dar ekranda ust cubuk kiriliyordu: buton etiketleri kayboluyor, gizlilik
   rozeti ince bir cizgiye iniyor, alt baslik dort satira yayiliyordu.
   Tasiyan bilgi olmayanlar gizlenir, tasiyanlar yerinde kalir. */
@media (max-width: 640px) {
  .topbar-inner { gap: 10px; padding: 12px 16px; }
  .brand small { display: none; }
  .brand { font-size: 15px; }
  .privacy-pill { display: none; }
  .site-menu-btn span { display: none; }
  .site-menu-btn { padding-left: 10px; padding-right: 10px; }
  .site-menu { right: auto; left: 50%; transform: translateX(-50%); min-width: 210px; }
}


/* ---------- Analiz sonrasi geri bildirim ---------- */

.feedback {
  margin-top: 26px; padding: 18px 20px;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--bg-subtle);
}
.feedback[hidden] { display: none; }
.feedback-ask {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  font-size: 14px; font-weight: 600; color: var(--text);
}
.feedback-ask[hidden] { display: none; }
.feedback-btns { display: flex; gap: 8px; }
.fb-btn {
  min-width: 74px; padding: 7px 16px; cursor: pointer;
  font-size: 13px; font-weight: 600; font-family: inherit;
  color: var(--text); background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: 9px;
  transition: border-color .15s, color .15s, background .15s;
}
.fb-btn:hover { border-color: var(--accent); color: var(--accent); }
.fb-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.feedback-thanks {
  margin: 0; font-size: 14px; font-weight: 600; color: var(--ok);
}
.feedback-thanks[hidden] { display: none; }
/* Ne gonderildigi soruyla AYNI yerde yaziyor. Gizlilik sayfasina
   gomulmus bir cumle, tiklama anindaki soruyu karsilamaz. */
.feedback-note {
  margin: 9px 0 0; font-size: 12px; color: var(--text-faint);
}
@media print { .feedback { display: none; } }

.feedback-reasons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.feedback-reasons[hidden] { display: none; }
.fb-why { font-size: 14px; font-weight: 600; color: var(--text); }
.feedback-reasons .fb-btn { min-width: 0; }

/* ---------- Bulgu: onerilen aksiyon ---------- */

.warn-item.has-action { align-items: flex-start; }
.warn-body { min-width: 0; flex: 1; }
.warn-text { font-weight: 600; }

.warn-action {
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline;
  margin-top: 7px; font-size: 13.5px; color: var(--text);
}
.warn-k {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint); white-space: nowrap;
}
/* Marka adi bozulmasin diye buyutme YOK; bunlar cevrilen etiketler,
   Turkce'de "i" harfi noktali I'ye donusmedigi surece sorun yok —
   yine de kucuk-buyuk donusumunu tarayiciya birakmiyoruz. */

.warn-toggle {
  margin-top: 8px; padding: 0; cursor: pointer;
  background: none; border: 0; font-family: inherit;
  font-size: 12.5px; font-weight: 600; color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px;
}
.warn-toggle:hover { opacity: .82; }
.warn-toggle[aria-expanded="true"]::after { content: " ↑"; }
.warn-toggle[aria-expanded="false"]::after { content: " ↓"; }

.warn-detail {
  margin-top: 12px; padding: 14px 16px;
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 11px;
}
.warn-detail[hidden] { display: none; }
.warn-sec + .warn-sec { margin-top: 13px; }
.warn-sec p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); }
.warn-sec ol { margin: 6px 0 0; padding-left: 20px; }
.warn-sec ol li { font-size: 13.5px; line-height: 1.6; color: var(--text-muted); margin-bottom: 5px; }

.warn-evid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.warn-evid code {
  font-size: 11.5px; padding: 2px 7px; border-radius: 5px;
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text);
}

.warn-src { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.warn-src a { font-size: 13px; color: var(--accent); }
.warn-on { font-size: 11px; color: var(--text-faint); }

.warn-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.warn-cta .btn { font-size: 12.5px; padding: 6px 13px; }

/* Yazdirmada detaylar acik olmali: kagitta tiklanacak bir sey yok. */
@media print {
  .warn-detail[hidden] { display: block !important; }
  .warn-toggle, .warn-cta { display: none; }
}