/* ═══════════════════════════════════════════════
   realtime.tr — Main Stylesheet
   CSS Library: Pico CSS v2 (base) + Custom
   Aesthetic: Industrial Precision / Dark Monitor
═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── Root Variables ─────────────────────────── */
/* ── DARK THEME (default) — GitHub Midnight palette ── */
:root, [data-theme="dark"] {
    /* Base surfaces */
    --bg:        #0d1117;   /* GitHub dark bg — blue undertone, not pure black */
    --bg-2:      #161b22;   /* elevated surface */
    --bg-3:      #21262d;   /* surface 2 */
    --bg-card:   #161b22;
    --border:    #30363d;
    --border-2:  #3d444d;
    --text:      #e6edf3;   /* brighter text */
    --text-dim:  #8b949e;
    --text-faint:#484f58;
    /* Brand accent — vivid green */
    --accent:    #00d68f;
    --accent-dim:rgba(0,214,143,.12);
    --red:       #f85149;
    --red-dim:   rgba(248,81,73,.12);
    --yellow:    #f0b429;
    --font-mono: 'Space Mono', monospace;
    --font-sans: 'DM Sans', sans-serif;
    --r:         10px;
    --r-sm:      6px;
    --shadow:    0 4px 32px rgba(0,0,0,.4);

    /* RT design tokens */
    --rt-bg:#0d1117; --rt-surface:#161b22; --rt-surface2:#21262d;
    --rt-border:#30363d; --rt-border2:#3d444d;
    --rt-text:#e6edf3; --rt-text-muted:#8b949e; --rt-text-dim:#6e7681;
    --rt-up:#3fb950;     --rt-up-bg:rgba(63,185,80,.1);  --rt-up-border:rgba(63,185,80,.25);
    --rt-degraded:#f0b429; --rt-degraded-bg:rgba(240,180,41,.1); --rt-degraded-border:rgba(240,180,41,.25);
    --rt-down:#f85149;   --rt-down-bg:rgba(248,81,73,.1); --rt-down-border:rgba(248,81,73,.25);
    --rt-partial:#fb8500; --rt-partial-bg:rgba(251,133,0,.1);
    --rt-maint:#a78bfa;  --rt-maint-bg:rgba(167,139,250,.1);
    --rt-unknown:#6e7681;--rt-unknown-bg:rgba(110,118,129,.1);
    --rt-accent:#00d68f; --rt-accent2:#818cf8;
    --rt-radius:12px; --rt-radius-sm:8px; --rt-nav-h:64px;
    font-family:'Syne',system-ui,sans-serif; color-scheme:dark;
}

/* ── Pico overrides ─────────────────────────── */
[data-theme="dark"] {
    --pico-background-color: var(--bg);
    --pico-card-background-color: var(--bg-card);
    --pico-card-border-color: var(--border);
    --pico-color: var(--text);
    --pico-font-family: var(--font-sans);
    --pico-h1-color: var(--rt-text);
    --pico-h2-color: var(--rt-text-muted);
    --pico-muted-color: var(--text-dim);
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--font-sans); margin: 0; }
h1,h2,h3,h4 { font-family: var(--font-sans); letter-spacing: -0.02em; }
a { color: inherit; text-decoration: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

/* ── Header ─────────────────────────────────── */
.site-header {
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 100;
    backdrop-filter: blur(12px);
}
.top-nav {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 0.1rem 0;
}
.logo {
    display: flex; align-items: center; gap: 0.6rem;
    font-family: var(--font-mono); font-size: 1.15rem;
    font-weight: 700; color: #fff; letter-spacing: -0.03em;
}
.logo-pulse {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 var(--accent);
    animation: pulse-ring 2s infinite;
}
@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0 #00e5a066; }
    70%  { box-shadow: 0 0 0 8px #00e5a000; }
    100% { box-shadow: 0 0 0 0 #00e5a000; }
}
.tld { color: var(--accent); }
.nav-right { display: flex; align-items: center; gap: 1rem; }
.live-badge {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--accent);
    background: var(--accent-dim); border: 1px solid #00e5a044;
    padding: 0.3rem 0.7rem; border-radius: 20px;
}
.live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); animation: pulse-ring 1.5s infinite;
}
.clock {
    font-family: var(--font-mono); font-size: 0.78rem;
    color: var(--text-dim); letter-spacing: 0.05em;
}

/* ── Hero ────────────────────────────────────── */
.hero {
    padding: 3.5rem 0 2rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
}
.hero h1 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 300; color: #fff; margin: 0 0 0.6rem;
    line-height: 1.1;
}
.hero h1 em {
    font-style: normal; font-weight: 700;
    color: var(--accent);
}
.hero p { color: var(--text-dim); font-size: 1.05rem; margin: 0 0 1.5rem; }

.global-status {
    display: inline-flex; align-items: center; gap: 0.7rem;
    padding: 0.5rem 1.2rem; border-radius: var(--r-sm);
    font-size: 0.9rem; font-weight: 500;
    border: 1px solid var(--border-2);
    background: var(--bg-2);
    transition: all 0.3s ease;
}
.global-status.checking { color: var(--text-dim); }
.global-status.all-good  { color: var(--accent); border-color: #00e5a044; background: var(--accent-dim); }
.global-status.issues    { color: var(--red);    border-color: #ff4d4d44; background: var(--red-dim); }
.gs-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: currentColor;
}
.global-status.all-good .gs-dot { animation: pulse-ring 1.5s infinite; }

/* ── Filters ─────────────────────────────────── */
.filters {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
}
.filter {
    background: var(--bg-2); color: var(--text-dim);
    border: 1px solid var(--border); border-radius: 20px;
    padding: 0.35rem 0.9rem; font-size: 0.8rem;
    font-family: var(--font-sans); cursor: pointer;
    transition: all 0.15s;
}
.filter:hover { border-color: var(--border-2); color: var(--text); }
.filter.active {
    background: var(--accent); color: #000;
    border-color: var(--accent); font-weight: 600;
}
.filter sup { font-size: 0.65rem; opacity: 0.7; margin-left: 2px; }

/* ── Grid ────────────────────────────────────── */

/* SERVICES */
.services-section{padding:48px 0 80px}
.cat-group{margin-bottom:48px}
.cat-title{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--rt-text-dim);margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--rt-border)}
.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}

.grid-services {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.service-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 1.1rem;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
    display: flex; flex-direction: column; gap: 0.5rem;
    position: relative; overflow: hidden;
    text-decoration: none; color: inherit;
}
.service-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--accent, #333);
    opacity: 0; transition: opacity 0.2s;
}
.service-card:hover {
    border-color: var(--border-2);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}
.service-card:hover::before { opacity: 1; }

.sc-head {
    display: flex; justify-content: space-between; align-items: flex-start;
}
.sc-icon {
    font-size: 1.4rem; line-height: 1;
    width: 36px; height: 36px;
    background: var(--bg-3); border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono);
    color: var(--accent);
    font-size: 1rem; font-weight: 700;
}

/* Status badge */
.sc-status {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; padding: 0.2rem 0.5rem;
    border-radius: 20px; border: 1px solid;
}
.sc-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.sc-status.pending { color: var(--text-faint); border-color: var(--border); }
.sc-status.up   { color: #25d366; border-color: #00e5a044; background: var(--accent-dim); }
.sc-status.down { color: var(--red);    border-color: #ff4d4d44; background: var(--red-dim); }
.sc-status.up .sc-dot { animation: pulse-ring 2s infinite; }

.sc-name { font-weight: 600; font-size: 0.9rem; color: #e2e5ef; }
.sc-meta { display: flex; justify-content: space-between; align-items: center; }
.sc-cat  { font-size: 0.72rem; color: var(--text-dim); }
.sc-rt   { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-dim); }

/* ── Summary Bar ─────────────────────────────── */
.summary-bar {
    display: flex; align-items: center; justify-content: center;
    gap: 0; background: var(--bg-2); border: 1px solid var(--border);
    border-radius: var(--r); padding: 1.2rem 2rem;
    margin-bottom: 2rem; flex-wrap: wrap;
}
.sum-item { text-align: center; padding: 0 2rem; }
.sum-val  { display: block; font-family: var(--font-mono); font-size: 1.8rem; font-weight: 700; color: #fff; }
.sum-val.down { color: var(--red); }
.sum-key  { font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; }
.sum-sep  { width: 1px; height: 40px; background: var(--border); }

/* ── About Cards ─────────────────────────────── */
.about-cards {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem; margin-bottom: 3rem;
}
.ab-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--r); padding: 1.5rem;
}
.ab-ico { font-size: 1.5rem; margin-bottom: 0.75rem; }
.ab-card h4 { color: #e2e5ef; margin: 0 0 0.4rem; font-size: 0.95rem; }
.ab-card p  { color: var(--text-dim); font-size: 0.85rem; margin: 0; line-height: 1.6; }

/* ── Footer ──────────────────────────────────── */
.site-footer {
    border-top: 1px solid var(--border);
    padding: 1.5rem 0;
    background: var(--bg-2);
}
.site-footer .container {
    display: flex; flex-wrap: wrap; gap: 0.5rem 2rem;
    align-items: center; justify-content: space-between;
}
.logo-sm { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 700; color: #fff; }
.disc { font-size: 0.75rem; color: var(--text-faint); }






/* NAVBAR */
.navbar{position:sticky;top:0;z-index:100;height:var(--rt-nav-h);background:rgba(10,11,13,.85);backdrop-filter:blur(20px) saturate(1.4);border-bottom:1px solid var(--rt-border)}
.nav-inner{height:100%;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.1rem;letter-spacing:-.02em;flex-shrink:0}
.brand-dot{width:10px;height:10px;border-radius:50%;background:var(--rt-up);box-shadow:0 0 10px var(--rt-up);animation:pulseDot 2s ease-in-out infinite}
.brand-dot.small{width:7px;height:7px}
.brand-tld{color:var(--rt-accent)}
.nav-links{display:flex;gap:4px;margin-inline-start:auto}
.nav-link{padding:6px 14px;border-radius:6px;font-size:.875rem;font-weight:600;color:var(--rt-text-muted);transition:color .2s,background .2s}
.nav-link:hover,.nav-link.active{color:var(--rt-text);background:var(--rt-surface)}
.nav-time{font-family:'DM Mono',monospace;font-size:.8rem;color:var(--rt-text-muted);letter-spacing:.05em;padding:4px 10px;background:var(--rt-surface);border:1px solid var(--rt-border);border-radius:6px;flex-shrink:0}

/* CARD */
.service-card{background:var(--rt-surface);border:1px solid var(--rt-border);border-radius:var(--rt-radius);padding:20px;display:flex;flex-direction:column;gap:14px;transition:all .25s cubic-bezier(.4,0,.2,1);cursor:pointer;position:relative;overflow:hidden;animation:fadeInUp .35s ease backwards}
.service-card::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .25s;pointer-events:none}
.service-card.status-up::before{background:radial-gradient(circle at 100% 0%,rgba(34,197,94,.06),transparent 60%)}
.service-card.status-down::before{background:radial-gradient(circle at 100% 0%,rgba(239,68,68,.06),transparent 60%)}
.service-card.status-degraded::before{background:radial-gradient(circle at 100% 0%,rgba(245,158,11,.06),transparent 60%)}
.service-card:hover{transform:translateY(-3px);border-color:var(--rt-border2);box-shadow:0 12px 32px rgba(0,0,0,.4)}
.service-card:hover::before{opacity:1}
.service-card.status-up{border-left:3px solid var(--rt-up)}
.service-card.status-degraded{border-left:3px solid var(--rt-degraded)}
.service-card.status-partial{border-left:3px solid var(--rt-partial)}
.service-card.status-down{border-left:3px solid var(--rt-down)}
.service-card.status-maintenance{border-left:3px solid var(--rt-maint)}
.service-card.status-unknown{border-left:3px solid var(--rt-unknown)}

.card-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.service-logo{width:40px;height:40px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.service-logo svg{width:100%;height:100%}

.status-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border:1px solid;flex-shrink:0}
.badge-up{color:var(--rt-up);background:var(--rt-up-bg);border-color:var(--rt-up-border)}
.badge-degraded{color:var(--rt-degraded);background:var(--rt-degraded-bg);border-color:var(--rt-degraded-border)}
.badge-partial{color:var(--rt-partial);background:var(--rt-partial-bg);border-color:rgba(249,115,22,.2)}
.badge-down{color:var(--rt-down);background:var(--rt-down-bg);border-color:var(--rt-down-border)}
.badge-maintenance{color:var(--rt-maint);background:var(--rt-maint-bg);border-color:rgba(167,139,250,.2)}
.badge-unknown{color:var(--rt-unknown);background:var(--rt-unknown-bg);border-color:rgba(107,114,128,.2)}
.badge-dot{width:5px;height:5px;border-radius:50%;background:currentColor}
.badge-up .badge-dot{animation:pulseDot 1.5s ease-in-out infinite}

.service-name{font-size:1rem;font-weight:700;margin-bottom:4px;color:var(--rt-text)}
.service-desc{font-size:.8rem;color:var(--rt-text-muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.card-footer{display:flex;align-items:center;gap:8px;margin-top:auto}
.uptime-bar{display:flex;gap:2px;flex:1;height:24px;align-items:flex-end}
.uptime-tick{flex:1;border-radius:2px;min-width:2px}
.uptime-tick.bar-up{background:var(--rt-up);height:100%}
.uptime-tick.bar-degraded{background:var(--rt-degraded);height:65%}
.uptime-tick.bar-down{background:var(--rt-down);height:35%}
.uptime-label{font-family:'DM Mono',monospace;font-size:.68rem;color:var(--rt-text-dim);flex-shrink:0}

/* PULSE */
@keyframes pulseDot{0%,100%{opacity:1;box-shadow:0 0 6px currentColor}50%{opacity:.5;box-shadow:0 0 2px currentColor}}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:currentColor;animation:pulseDot 1.5s ease-in-out infinite;flex-shrink:0}
.pulse-dot.large{width:12px;height:12px}

/* DETAIL HERO */
.detail-hero{padding:48px 0;border-bottom:1px solid var(--rt-border)}
.status-bg-up{background:radial-gradient(ellipse 70% 80% at 30% 50%,rgba(34,197,94,.06),transparent)}
.status-bg-degraded{background:radial-gradient(ellipse 70% 80% at 30% 50%,rgba(245,158,11,.06),transparent)}
.status-bg-down{background:radial-gradient(ellipse 70% 80% at 30% 50%,rgba(239,68,68,.07),transparent)}
.status-bg-partial{background:radial-gradient(ellipse 70% 80% at 30% 50%,rgba(249,115,22,.06),transparent)}
.status-bg-maintenance{background:radial-gradient(ellipse 70% 80% at 30% 50%,rgba(167,139,250,.06),transparent)}
.status-bg-unknown{background:none}

.breadcrumb ol{display:flex;gap:8px;list-style:none;padding:0;margin:0 0 24px;font-size:.8rem;color:var(--rt-text-muted)}
.breadcrumb li::after{content:'/';margin-inline-start:8px}
.breadcrumb li:last-child::after{content:''}
.breadcrumb a:hover{color:var(--rt-text)}

.detail-header{display:flex;gap:24px;align-items:flex-start;margin-bottom:36px;flex-wrap:wrap}
.detail-logo{width:64px;height:64px;background:var(--rt-surface);border:1px solid var(--rt-border);border-radius:var(--rt-radius-sm);display:flex;align-items:center;justify-content:center;padding:10px;flex-shrink:0}
.detail-logo svg{width:100%;height:100%}
.detail-info h1{font-size:1.8rem;font-weight:800;margin-bottom:6px}
.detail-desc{color:var(--rt-text-muted);font-size:.9rem;margin-bottom:12px}
.detail-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.meta-tag{padding:3px 10px;background:var(--rt-surface2);border:1px solid var(--rt-border);border-radius:4px;font-size:.75rem;font-weight:600;color:var(--rt-text-muted);text-transform:uppercase;letter-spacing:.04em}
.meta-link{font-size:.8rem;color:var(--rt-accent);font-weight:600}
.meta-link:hover{text-decoration:underline}

.detail-status-box{background:var(--rt-surface);border:1px solid var(--rt-border);border-radius:var(--rt-radius);padding:24px 28px;display:flex;flex-direction:column;gap:12px}
.detail-status-box.status-up{border-color:var(--rt-up-border)}
.detail-status-box.status-down{border-color:var(--rt-down-border)}
.detail-status-box.status-degraded{border-color:var(--rt-degraded-border)}
.big-badge{display:flex;align-items:center;gap:12px}
.big-label{font-size:1.4rem;font-weight:800}
.status-up .big-label{color:var(--rt-up)}
.status-down .big-label{color:var(--rt-down)}
.status-degraded .big-label{color:var(--rt-degraded)}
.status-partial .big-label{color:var(--rt-partial)}
.status-maintenance .big-label{color:var(--rt-maint)}
.status-up .pulse-dot{color:var(--rt-up)}
.status-down .pulse-dot{color:var(--rt-down);animation:none}
.status-degraded .pulse-dot{color:var(--rt-degraded)}
.status-desc-text{color:var(--rt-text-muted);font-size:.9rem}
.status-meta-row{display:flex;gap:20px;flex-wrap:wrap;font-size:.8rem;color:var(--rt-text-muted);border-top:1px solid var(--rt-border);padding-top:12px}
.status-meta-row strong{color:var(--rt-text)}

/* DETAIL MAIN */
.detail-main{padding:48px 0 80px;display:flex;flex-direction:column;gap:48px}
.detail-section h2{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--rt-text-dim);margin-bottom:20px}

/* UPTIME CHART */
.uptime-chart{display:flex;gap:2px;height:40px;align-items:flex-end}
.uptime-tick.tall{height:100%}
.uptime-tick:hover{opacity:.7;cursor:default}
.uptime-chart-labels{display:flex;justify-content:space-between;margin-top:8px;font-size:.75rem;color:var(--rt-text-dim);font-family:'DM Mono',monospace}
.uptime-pct{color:var(--rt-up);font-weight:700}

/* ANIM */
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.services-grid .service-card:nth-child(1){animation-delay:.04s}
.services-grid .service-card:nth-child(2){animation-delay:.08s}
.services-grid .service-card:nth-child(3){animation-delay:.12s}
.services-grid .service-card:nth-child(4){animation-delay:.16s}
.services-grid .service-card:nth-child(5){animation-delay:.20s}
.services-grid .service-card:nth-child(6){animation-delay:.24s}


/* ═══════════════════════════════════════════════
   DETAIL PAGE — tüm stiller main.css içinde
   ═══════════════════════════════════════════════ */

/* Breadcrumb */
.dp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: var(--rt-text-dim);
  margin-bottom: 32px;
}
.dp-breadcrumb a { color: var(--rt-text-muted); transition: color .15s; }
.dp-breadcrumb a:hover { color: var(--rt-text); }
.dp-breadcrumb > span:last-child { color: var(--rt-text); font-weight: 600; }

/* Detail hero alanı anasayfa heroyla aynı temel stili paylaşır */
.detail-page-hero {
  padding: 40px 0 48px;
  border-bottom: 1px solid var(--rt-border);
  /* background anasayfadan kalıtılır, override edilmez */
}

/* Servis başlık satırı */
.dp-header {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 32px;
}
.dp-logo {
  width: 72px; height: 72px;
  flex-shrink: 0;
  background: var(--rt-surface);
  border: 1px solid var(--rt-border);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
}
.dp-logo svg { width: 100%; height: 100%; }

.dp-category {
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--rt-text-dim);
  margin-bottom: 6px;
}
.dp-title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800; letter-spacing: -.03em;
  margin-bottom: 8px; color: var(--rt-text);
}
.dp-desc {
  font-size: .9rem; color: var(--rt-text-muted);
  line-height: 1.6; margin-bottom: 16px;
  max-width: 520px;
}
.dp-links { display: flex; gap: 10px; flex-wrap: wrap; }
.dp-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border-radius: var(--rt-radius-sm);
  font-size: .82rem; font-weight: 700;
  transition: all .2s;
}
.dp-btn-primary {
  background: var(--rt-accent); color: #fff;
}
.dp-btn-primary:hover { opacity: .85; }
.dp-btn-ghost {
  background: var(--rt-surface);
  border: 1px solid var(--rt-border);
  color: var(--rt-text-muted);
}
.dp-btn-ghost:hover { color: var(--rt-text); border-color: var(--rt-border2); }

/* Durum satırı */
.dp-status-row {
  background: var(--rt-surface);
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.dp-status-main {
  display: flex; align-items: center; gap: 14px;
}
.dp-pulse-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.dp-pulse-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .15;
  animation: dpPulse 2s ease-in-out infinite;
}
@keyframes dpPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.6)} }

.dp-pulse-up          { background: var(--rt-up);       color: var(--rt-up); }
.dp-pulse-degraded    { background: var(--rt-degraded);  color: var(--rt-degraded); }
.dp-pulse-down        { background: var(--rt-down);      color: var(--rt-down); animation: none; }
.dp-pulse-down::after { animation: none; }
.dp-pulse-partial     { background: var(--rt-partial);   color: var(--rt-partial); }
.dp-pulse-maintenance { background: var(--rt-maint);     color: var(--rt-maint); }
.dp-pulse-unknown     { background: var(--rt-unknown);   color: var(--rt-unknown); }

.dp-status-label {
  font-size: 1.1rem; font-weight: 800; line-height: 1.2;
}
.dp-status-up   .dp-status-label { color: var(--rt-up); }
.dp-status-down .dp-status-label { color: var(--rt-down); }
.dp-status-degraded .dp-status-label { color: var(--rt-degraded); }
.dp-status-partial  .dp-status-label { color: var(--rt-partial); }
.dp-status-maintenance .dp-status-label { color: var(--rt-maint); }
.dp-status-unknown .dp-status-label { color: var(--rt-unknown); }

.dp-status-desc { font-size: .82rem; color: var(--rt-text-muted); margin-top: 2px; }

.dp-meta-grid {
  display: flex; gap: 28px; flex-wrap: wrap;
}
.dp-meta-item { display: flex; flex-direction: column; gap: 3px; }
.dp-meta-key {
  font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--rt-text-dim);
}
.dp-meta-val { font-size: .88rem; font-weight: 700; color: var(--rt-text); }
.c-good { color: var(--rt-up) !important; }
.c-warn { color: var(--rt-degraded) !important; }
.c-bad  { color: var(--rt-down) !important; }

/* ── MAIN CONTENT ── */
.dp-main {
  padding: 56px 0 80px;
  display: flex; flex-direction: column; gap: 56px;
}

/* Section */
.dp-section {}
.dp-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rt-border);
}
.dp-section-head h2 {
  font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--rt-text-muted); margin: 0;
}
.dp-section-head span {
  font-size: .75rem; color: var(--rt-text-dim);
  font-family: 'DM Mono', monospace;
}

/* Card */
.dp-card {
  background: var(--rt-surface);
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius);
  padding: 24px;
  margin-bottom: 16px;
}
.dp-card:last-child { margin-bottom: 0; }
.dp-card-flush { padding: 0; overflow: hidden; }

/* ── 24H CHART ── */
.chart-wrap { position: relative; }

.chart-bars {
  display: flex;
  gap: 4px;
  height: 140px;
  align-items: flex-end;
  padding-bottom: 24px; /* yer bırak label için */
}

.chart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  height: 100%;
  cursor: default;
  position: relative;
}

.chart-bar-area {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
}

.chart-bar {
  width: 100%;
  border-radius: 3px 3px 2px 2px;
  min-height: 6px;
  transition: filter .15s, opacity .15s;
}
.chart-col:hover .chart-bar { filter: brightness(1.3); }

.bar-up  { background: var(--rt-up); opacity: .65; }
.bar-deg { background: var(--rt-degraded); opacity: .85; }
.bar-dn  { background: var(--rt-down); opacity: 1; }
.chart-col:hover .bar-up  { opacity: 1; }
.chart-col:hover .bar-deg { opacity: 1; }

.chart-tick {
  position: absolute;
  bottom: 0;
  font-size: .6rem;
  font-family: 'DM Mono', monospace;
  color: var(--rt-text-dim);
  white-space: nowrap;
  line-height: 1;
  height: 20px;
  display: flex; align-items: flex-end;
}

.chart-tooltip-box {
  position: absolute;
  top: 0; left: 0;
  background: var(--rt-surface2);
  border: 1px solid var(--rt-border2);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: .75rem;
  font-family: 'DM Mono', monospace;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .1s;
  z-index: 20;
  color: var(--rt-text);
  transform: translate(-50%, -100%);
}

.chart-foot {
  margin-top: 12px;
  display: flex; align-items: center;
}
.chart-legend { display: flex; gap: 18px; }
.leg-item {
  display: flex; align-items: center; gap: 6px;
  font-size: .75rem; color: var(--rt-text-muted);
}
.leg-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

/* Stat grid */
.dp-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.dp-stat-box {
  background: var(--rt-surface);
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius-sm);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 5px;
}
.dp-stat-num {
  font-size: 1.5rem; font-weight: 800;
  font-family: 'DM Mono', monospace; line-height: 1;
}
.dp-stat-lbl {
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--rt-text-dim);
}

/* ── 90 GÜN ── */
.uptime90 {
  display: flex; gap: 3px;
  height: 36px;
}
.u90 {
  flex: 1; border-radius: 3px; min-width: 2px;
  cursor: default; transition: opacity .15s;
}
.u90:hover { opacity: .7; }
.u90-up       { background: var(--rt-up); }
.u90-degraded { background: var(--rt-degraded); }
.u90-down     { background: var(--rt-down); }
.uptime90-labels {
  display: flex; justify-content: space-between;
  margin-top: 8px;
  font-size: .7rem; color: var(--rt-text-dim);
  font-family: 'DM Mono', monospace;
}

/* ── OLAYLAR ── */
.inc-row {
  display: flex;
  gap: 16px;
  padding: 20px 24px;
  align-items: flex-start;
}
.inc-border { border-top: 1px solid var(--rt-border); }

.inc-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0; margin-top: 5px;
  border: 2px solid;
}
.inc-dot-up          { background: var(--rt-up);       border-color: rgba(34,197,94,.4); }
.inc-dot-down        { background: var(--rt-down);      border-color: rgba(239,68,68,.4); }
.inc-dot-degraded    { background: var(--rt-degraded);  border-color: rgba(245,158,11,.4); }
.inc-dot-maintenance { background: var(--rt-maint);     border-color: rgba(167,139,250,.4); }
.inc-dot-partial     { background: var(--rt-partial);   border-color: rgba(249,115,22,.4); }

.inc-body { flex: 1; }
.inc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.inc-dur  { font-size: .72rem; color: var(--rt-text-dim); font-family: 'DM Mono', monospace; }
.inc-date { font-size: .72rem; color: var(--rt-text-dim); font-family: 'DM Mono', monospace; margin-inline-start: auto; }
.inc-title { font-size: .92rem; font-weight: 700; margin-bottom: 4px; }
.inc-detail { font-size: .82rem; color: var(--rt-text-muted); line-height: 1.6; }

/* ── RESPONSIVE ── */
@media(max-width:768px) {
  .dp-header { flex-direction: column; }
  .dp-status-row { flex-direction: column; align-items: flex-start; }
  .dp-meta-grid { gap: 16px; }
  .dp-stat-grid { grid-template-columns: repeat(2,1fr); }
}
@media(max-width:480px) {
  .chart-bars { height: 100px; gap: 2px; }
  .dp-stat-grid { grid-template-columns: repeat(2,1fr); }
  .uptime90 { gap: 2px; }
  .dp-meta-grid { gap: 12px; }
}





/* ── Responsive ──────────────────────────────── */
@media (max-width: 768px) {
    .stats-row { grid-template-columns: repeat(2, 1fr); }
    .summary-bar { gap: 1rem; padding: 1rem; }
    .sum-item { padding: 0 1rem; }
    .sum-sep { display: none; }
    .detail-hero { flex-direction: column; align-items: flex-start; }
    .main-status { width: 100%; }
    .grid-services { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); }
}
@media (max-width: 480px) {
    .hero h1 { font-size: 1.8rem; }
    .stats-row { grid-template-columns: 1fr 1fr; }
    .clock { display: none; }
}

/* ── Loading shimmer ─────────────────────────── */
@keyframes shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.shimmer {
    background: linear-gradient(90deg, var(--bg-3) 25%, var(--border) 50%, var(--bg-3) 75%);
    background-size: 400px 100%;
    animation: shimmer 1.4s infinite;
}

/* ── Card hidden ─────────────────────────────── */
.service-card.hidden { display: none; }

/* ═══════════════════════════════════════════════
   NAV MENU — ana sayfa & alt sayfa header menüsü
   ═══════════════════════════════════════════════ */


/* ── Nav layout: CSS Grid for true centering ─────── */
.top-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* logo | nav | right */
    align-items: center;
    padding: 0.9rem 0;
    gap: 8px;
}

/* Left column — logo */
.logo { justify-self: start; }

/* Centre column — nav links */
.main-nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    justify-content: center;
}

/* Right column */
.nav-right {
    display: flex; align-items: center; gap: 8px;
    justify-content: flex-end;
}

.main-nav-link {
    padding: 6px 13px; border-radius: 8px;
    font-size: .83rem; font-weight: 600;
    color: var(--rt-text-muted);
    transition: color .15s, background .15s;
    white-space: nowrap; cursor: pointer;
}
.main-nav-link:hover  { color: var(--rt-text); background: var(--bg-3); }
.main-nav-link.active { color: var(--accent);  background: var(--accent-dim); }

/* ── Dropdown ────────────────────────────────────── */
.nav-dropdown { position: relative; }

.nav-dropdown-btn {
    background: none; border: none; cursor: pointer;
    font-family: var(--font-sans);
    display: inline-flex; align-items: center; gap: 4px;
}
.nav-chevron {
    font-size: .62rem; transition: transform .2s;
    display: inline-block; margin-top: 1px;
}
.nav-dropdown-btn.dd-open .nav-chevron { transform: rotate(180deg); }

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    /* Anchor to left of the button, avoid centering which causes drift */
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 16px 48px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.04);
    z-index: 9999;
    max-height: 80vh;
    overflow-y: auto;
}
.nav-dropdown-menu.open {
    display: flex; flex-direction: column;
    /*animation: fadeInUp .15s ease;*/
}

.nav-dropdown-item {
    display: flex; flex-direction: column; gap: 2px;
    padding: 9px 12px; border-radius: 8px;
    transition: background .12s; text-decoration: none; color: inherit;
}
.nav-dropdown-item:hover   { background: var(--bg-3); }
.nav-dropdown-item.current { background: var(--accent-dim); }
.ndi-label { font-size: .84rem; font-weight: 700; color: var(--rt-text); }
.nav-dropdown-item.current .ndi-label { color: var(--accent); }
.ndi-desc  { font-size: .71rem; color: var(--rt-text-dim); }

/* ── Hamburger ───────────────────────────────────── */
.nav-hamburger {
    display: none; flex-direction: column;
    justify-content: center; gap: 5px;
    width: 34px; height: 34px; padding: 6px;
    background: none; border: 1px solid var(--border);
    border-radius: 8px; cursor: pointer; flex-shrink: 0;
}
.nav-hamburger span {
    display: block; height: 2px;
    background: var(--rt-text-muted);
    border-radius: 2px; transition: all .2s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile nav ──────────────────────────────────── */
.mobile-nav {
    display: none; flex-direction: column; gap: 2px;
    padding: 8px 0 14px; border-top: 1px solid var(--border);
}
.mobile-nav.open { display: flex; }
.mobile-nav-link {
    padding: 10px 12px; border-radius: 8px;
    font-size: .9rem; font-weight: 600; color: var(--rt-text-muted);
    transition: color .15s, background .15s;
}
.mobile-nav-link:hover  { color: var(--rt-text); background: var(--bg-3); }
.mobile-nav-link.active { color: var(--accent); background: var(--accent-dim); }
.mobile-nav-divider {
    font-size: .64rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: var(--rt-text-dim); padding: 10px 12px 4px;
}
.mobile-nav-tool { padding-left: 20px; }

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 900px) {
    .top-nav { grid-template-columns: auto 1fr auto; }
    .main-nav-links { display: none; }
    .nav-hamburger  { display: flex; }
    .live-badge, .clock { display: none; }
}
@media (max-width: 480px) {
    .lang-switch { display: none; }
}

/* Mono utility */
.mono { font-family: 'DM Mono', 'Space Mono', monospace; }

/* Check-layer indicator */
.check-layers {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 12px; font-size:.72rem; color:var(--rt-text-dim); flex-wrap:wrap;
}
.cl-label { color:var(--rt-text-dim); white-space:nowrap; }
.cl-pill  {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 20px;
    border: 1px solid var(--border-2); background: var(--bg-3);
    color: var(--rt-text-muted); font-family: var(--font-mono);
    font-size: .68rem; white-space: nowrap;
}
.cl-pill.ok { color:var(--rt-up); border-color:rgba(34,197,94,.2); background:rgba(34,197,94,.07); }
.cl-arrow   { color:var(--text-faint); font-size:.7rem; }

   TOOL PAGES — DNS / IP / SSL araç sayfaları
   ═══════════════════════════════════════════════ */

/* Hero */
.tool-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 48px 0 36px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 36px;
}
.tool-hero-icon {
    font-size: 3rem;
    line-height: 1;
    flex-shrink: 0;
    width: 72px; height: 72px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
}
.tool-hero h1 {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -.03em;
    color: #fff;
    margin: 0 0 8px;
}
.tool-hero p {
    color: var(--rt-text-muted);
    font-size: .95rem;
    margin: 0;
    line-height: 1.6;
}

/* Form */
.tool-form-section { margin-bottom: 48px; }

.tool-form { margin-bottom: 20px; }

.tool-input-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tool-input {
    flex: 1;
    min-width: 220px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: .93rem;
    font-family: var(--font-mono);
    color: var(--rt-text);
    outline: none;
    transition: border-color .2s;
}
.tool-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}
.tool-input::placeholder { color: var(--rt-text-dim); }

.tool-select {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: .88rem;
    font-family: var(--font-mono);
    color: var(--rt-text);
    outline: none;
    cursor: pointer;
    transition: border-color .2s;
}
.tool-select:focus { border-color: var(--accent); }

.tool-btn {
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 10px;
    padding: 12px 24px;
    font-size: .9rem;
    font-weight: 700;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    white-space: nowrap;
}
.tool-btn:hover  { opacity: .88; transform: translateY(-1px); }
.tool-btn:active { transform: translateY(0); }

.tool-btn-ghost {
    background: var(--bg-2);
    color: var(--rt-text-muted);
    border: 1px solid var(--border);
}
.tool-btn-ghost:hover { color: var(--rt-text); background: var(--bg-3); }

/* Result container */
.tool-result {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    animation: fadeInUp .2s ease;
}

.tool-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--rt-text-muted);
    font-size: .9rem;
}

.tool-spinner {
    display: inline-block;
    width: 18px; height: 18px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.tool-error {
    color: var(--red);
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tool-empty {
    color: var(--rt-text-muted);
    font-size: .9rem;
    text-align: center;
    padding: 20px 0;
}

/* Info cards */
.tool-info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 60px;
}
.tool-info-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
}
.tool-info-icon { font-size: 1.4rem; margin-bottom: 10px; }
.tool-info-card h4 {
    color: #e2e5ef;
    font-size: .9rem;
    margin: 0 0 6px;
    font-weight: 700;
}
.tool-info-card p {
    color: var(--rt-text-muted);
    font-size: .82rem;
    margin: 0;
    line-height: 1.6;
}

/* ── DNS RESULT ── */
.dns-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.dns-meta-domain {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--rt-text);
    font-size: .9rem;
}
.dns-meta-type {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    background: var(--accent-dim);
    color: var(--accent);
    border: 1px solid #00e5a033;
    padding: 2px 8px;
    border-radius: 20px;
}
.dns-meta-count, .dns-meta-time {
    font-size: .75rem;
    color: var(--rt-text-muted);
    font-family: var(--font-mono);
}
.dns-meta-time { margin-inline-start: auto; }

.dns-table-wrap { overflow-x: auto; }
.dns-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .84rem;
}
.dns-table th {
    text-align: left;
    padding: 8px 12px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--rt-text-dim);
    border-bottom: 1px solid var(--border);
}
.dns-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    word-break: break-all;
}
.dns-table tr:last-child td { border-bottom: none; }
.dns-table tr:hover td { background: var(--bg-2); }

.dns-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: var(--bg-3);
    color: var(--accent);
    border: 1px solid var(--border);
    white-space: nowrap;
}
.dns-td-val { color: var(--rt-text); max-width: 420px; }
.dns-td-ttl { color: var(--rt-text-muted); white-space: nowrap; }

/* ── IP RESULT ── */
.ip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.ip-address {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--rt-text);
    letter-spacing: .03em;
}
.ip-flags { display: flex; gap: 6px; flex-wrap: wrap; }
.ip-flag-badge {
    font-size: .7rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    background: var(--red-dim);
    color: var(--red);
    border: 1px solid #ff4d4d33;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.ip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0;
    margin-bottom: 16px;
}
.ip-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}
.ip-row:nth-child(odd) { background: var(--bg-2); }
.ip-row-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--rt-text-dim);
}
.ip-row-val {
    font-size: .88rem;
    color: var(--rt-text);
    word-break: break-all;
}

.ip-bl-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.ip-bl-label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--rt-text-muted);
}
.ip-bl-badge {
    font-size: .8rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 8px;
}
.bl-clean  { background: rgba(34,197,94,.1);   color: var(--rt-up);   border: 1px solid rgba(34,197,94,.2); }
.bl-listed { background: var(--red-dim);        color: var(--red);     border: 1px solid #ff4d4d33; }

.bl-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.bl-item {
    font-size: .76rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid;
}
.bl-item-ok  { background: rgba(34,197,94,.07); color: var(--rt-up);   border-color: rgba(34,197,94,.2); }
.bl-item-bad { background: var(--red-dim);       color: var(--red);     border-color: #ff4d4d33; }

.ip-map-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: .83rem;
    font-weight: 600;
    color: var(--rt-accent);
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: border-color .15s, background .15s;
}
.ip-map-link:hover { background: var(--bg-2); border-color: var(--border-2); }

/* ── SSL RESULT ── */
.ssl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    border: 1px solid;
}
.ssl-ok   { background: rgba(34,197,94,.08);  border-color: rgba(34,197,94,.2);  }
.ssl-warn { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.2); }
.ssl-bad  { background: var(--red-dim);        border-color: #ff4d4d33; }

.ssl-status-label {
    font-size: 1.05rem;
    font-weight: 800;
}
.ssl-ok   .ssl-status-label { color: var(--rt-up); }
.ssl-warn .ssl-status-label { color: var(--rt-degraded); }
.ssl-bad  .ssl-status-label { color: var(--red); }

.ssl-domain {
    font-size: .9rem;
    color: var(--rt-text-muted);
}

.ssl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.ssl-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.ssl-row:last-child { border-bottom: none; }
.ssl-row:nth-child(odd) { background: var(--bg-2); }
.ssl-row-label {
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--rt-text-dim);
}
.ssl-row-val {
    font-size: .87rem;
    color: var(--rt-text);
    word-break: break-all;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ssl-days-badge {
    font-size: .72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
}
.ssl-ok.ssl-days-badge   { background: rgba(34,197,94,.15);  color: var(--rt-up); }
.ssl-warn.ssl-days-badge { background: rgba(245,158,11,.15); color: var(--rt-degraded); }
.ssl-bad.ssl-days-badge  { background: var(--red-dim);        color: var(--red); }

.ssl-sans-section { margin-top: 16px; }
.ssl-sans-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--rt-text-dim);
    margin-bottom: 10px;
}
.ssl-sans { display: flex; flex-wrap: wrap; gap: 6px; }
.ssl-san {
    font-family: var(--font-mono);
    font-size: .78rem;
    padding: 3px 10px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--rt-text-muted);
}
.ssl-san-more {
    color: var(--accent);
    border-color: #00e5a033;
    background: var(--accent-dim);
}

/* ── HTTP HEADERS RESULT ── */
.hdr-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.hdr-code {
    font-size: 1.6rem;
    font-weight: 800;
    font-family: var(--font-mono);
    min-width: 56px;
}
.hdr-url {
    font-size: .82rem;
    color: var(--rt-text-muted);
    word-break: break-all;
    flex: 1;
}
.hdr-time {
    font-size: .75rem;
    color: var(--rt-text-dim);
    font-family: var(--font-mono);
    white-space: nowrap;
}
.hdr-redirect-badge {
    font-size: .72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(245,158,11,.1);
    color: var(--rt-degraded);
    border: 1px solid rgba(245,158,11,.2);
}

.hdr-section-title {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--rt-text-dim);
    margin: 20px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

/* Redirect chain */
.hdr-chain { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.chain-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    font-size: .8rem;
    flex-wrap: wrap;
    background: var(--bg-2);
}
.chain-ok   { border-left: 3px solid var(--rt-up); }
.chain-redir{ border-left: 3px solid var(--rt-degraded); }
.chain-err  { border-left: 3px solid var(--rt-down); }
.chain-code { font-weight: 800; font-family: var(--font-mono); min-width: 36px; }
.chain-ok   .chain-code { color: var(--rt-up); }
.chain-redir.chain-code { color: var(--rt-degraded); }
.chain-err  .chain-code { color: var(--rt-down); }
.chain-status { color: var(--rt-text); font-family: var(--font-mono); }
.chain-loc { color: var(--rt-text-muted); font-size: .75rem; word-break: break-all; }

/* Security headers */
.hdr-security { display: flex; flex-direction: column; gap: 4px; }
.sec-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-2);
}
.sec-ok       { border-left: 3px solid var(--rt-up); }
.sec-miss-crit{ border-left: 3px solid var(--rt-down); }
.sec-miss     { border-left: 3px solid var(--rt-degraded); }
.sec-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.sec-body { flex: 1; }
.sec-name { font-size: .82rem; font-weight: 700; font-family: var(--font-mono); color: var(--rt-text); }
.sec-value  { font-size: .76rem; color: var(--rt-text-muted); margin-top: 2px; word-break: break-all; }
.sec-missing{ font-size: .75rem; color: var(--rt-text-dim); font-style: italic; margin-top: 2px; }

/* Headers table */
.hdr-table-wrap { overflow-x: auto; }
.hdr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}
.hdr-table th {
    text-align: left;
    padding: 8px 12px;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--rt-text-dim);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.hdr-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.hdr-table tr:last-child td { border-bottom: none; }
.hdr-table tr:hover td { background: var(--bg-2); }
.hdr-key { color: var(--accent); white-space: nowrap; min-width: 200px; }
.hdr-val { color: var(--rt-text); word-break: break-all; }

/* ── PORT RESULT ── */
.port-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.port-host {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--rt-text);
}
.port-ip {
    font-size: .8rem;
    color: var(--rt-text-muted);
    background: var(--bg-3);
    border: 1px solid var(--border);
    padding: 2px 8px;
    border-radius: 6px;
}
.port-stat {
    font-size: .78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}
.port-stat.open   { background: rgba(34,197,94,.1);  color: var(--rt-up);   border: 1px solid rgba(34,197,94,.2); }
.port-stat.closed { background: var(--bg-3);          color: var(--rt-text-dim); border: 1px solid var(--border); }

.port-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
}
.port-card {
    border-radius: 10px;
    padding: 14px;
    border: 1px solid;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform .15s;
}
.port-card:hover { transform: translateY(-2px); }
.port-open  { background: rgba(34,197,94,.06);  border-color: rgba(34,197,94,.25); }
.port-closed{ background: var(--bg-2);           border-color: var(--border); }
.port-number {
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1;
}
.port-open  .port-number { color: var(--rt-up); }
.port-closed.port-number { color: var(--rt-text-dim); }
.port-name { font-size: .72rem; font-weight: 600; color: var(--rt-text-muted); }
.port-badge { font-size: .72rem; margin-top: 4px; }
.port-ms   { font-size: .68rem; color: var(--rt-text-dim); font-family: var(--font-mono); }

/* Port input küçük */
.tool-input-sm { max-width: 200px; }

/* Responsive tools */
@media (max-width: 640px) {
    .tool-hero { flex-direction: column; align-items: flex-start; gap: 14px; }
    .tool-input-row { flex-direction: column; }
    .tool-input { min-width: unset; }
    .tool-btn   { width: 100%; text-align: center; }
    .ip-grid    { grid-template-columns: 1fr; }
    .ssl-grid   { grid-template-columns: 1fr; }
    .dns-td-val  { max-width: 200px; }
    .tool-input-sm { max-width: unset; }
    .port-grid   { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}

/* ── WHOIS ── */
.whois-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
    margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.whois-domain { font-size: 1.3rem; font-weight: 800; color: var(--rt-text); letter-spacing:.02em; }
.whois-server { font-size:.72rem; color:var(--rt-text-dim); }
.whois-raw-wrap { margin-top: 16px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.whois-raw-toggle { display:block; padding:10px 14px; font-size:.8rem; font-weight:700; color:var(--rt-text-muted); cursor:pointer; background:var(--bg-2); }
.whois-raw-toggle::-webkit-details-marker { display:none; }
.whois-raw { margin:0; padding:14px; background:var(--bg); font-family:var(--font-mono); font-size:.72rem; line-height:1.6; color:var(--rt-text-muted); white-space:pre-wrap; word-break:break-all; max-height:400px; overflow-y:auto; }

/* ── UPTIME CALCULATOR ── */
.uptime-slider-wrap { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 10px; }
.uptime-slider-header { display: flex; justify-content: space-between; align-items: center; }
.uptime-slider-label { font-size:.82rem; font-weight:700; color:var(--rt-text-muted); }
.uptime-display { font-size:1.2rem; font-weight:800; color:var(--accent); }
.uptime-slider {
    width: 100%; height: 6px; border-radius: 3px;
    appearance: none; -webkit-appearance: none;
    background: var(--border); outline: none; cursor: pointer;
}
.uptime-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width:18px; height:18px; border-radius:50%;
    background:var(--accent); cursor:pointer; box-shadow:0 0 0 3px var(--accent-dim);
}
.uptime-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.uptime-preset {
    padding: 4px 10px; border-radius: 20px; font-size:.75rem; font-weight:700;
    background:var(--bg-3); border:1px solid var(--border); color:var(--rt-text-muted);
    cursor:pointer; transition:all .15s;
}
.uptime-preset:hover, .uptime-preset.active { background:var(--accent-dim); color:var(--accent); border-color:#00e5a044; }

.uptime-result-header {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.uptime-result-pct { font-size:2rem; font-weight:800; color:var(--accent); }
.uptime-result-name { font-size:.88rem; color:var(--rt-text-muted); }
.uptime-result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.uptime-result-row {
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 16px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px;
}
.urr-period { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--rt-text-dim); }
.urr-val    { font-size:1.1rem; font-weight:800; color:var(--rt-text); }

.uptime-ref-section { margin-bottom: 10px; }

/* ══════════════════════════════════════════════════
   GLOBAL STATUS (check-host.net multi-location)
   ══════════════════════════════════════════════════ */
.gc-run-btn {
    padding: 5px 14px; border-radius: 8px;
    background: var(--accent); color: #000; border: none;
    font-size: .78rem; font-weight: 700; cursor: pointer;
    transition: opacity .15s; font-family: var(--font-sans);
}
.gc-run-btn:hover   { opacity: .85; }
.gc-run-btn:disabled{ opacity: .5; cursor: not-allowed; }

.global-notice { display:flex; align-items:flex-start; gap:16px; padding:8px 0; }
.global-notice-icon { font-size:2rem; flex-shrink:0; margin-top:2px; }
.global-notice-title { font-weight:700; color:var(--rt-text); margin-bottom:4px; font-size:.92rem; }
.global-notice-desc  { font-size:.82rem; color:var(--rt-text-muted); line-height:1.5; }

.global-summary { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:16px; }
.global-summary-label { font-size:.82rem; color:var(--rt-text-muted); }
.global-stat-up   { color:var(--rt-up);   font-weight:700; font-size:.85rem; }
.global-stat-down { color:var(--rt-down); font-weight:700; font-size:.85rem; }

.global-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}
.global-node {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--bg-2);
    transition: border-color .2s;
}
.global-node.gn-up      { border-left: 3px solid var(--rt-up); }
.global-node.gn-down    { border-left: 3px solid var(--rt-down); }
.global-node.gn-pending { opacity: .5; }

.global-flag { font-size: 1.3rem; flex-shrink: 0; }
.global-info { flex: 1; min-width: 0; }
.global-city    { font-size:.78rem; font-weight:700; color:var(--rt-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.global-country { font-size:.68rem; color:var(--rt-text-dim); }
.global-ms  { font-size:.72rem; font-family:var(--font-mono); color:var(--rt-up); white-space:nowrap; }
.global-err { font-size:.72rem; font-family:var(--font-mono); color:var(--rt-down); white-space:nowrap; }

/* ══════════════════════════════════════════════════
   PERFORMANCE TEST
   ══════════════════════════════════════════════════ */
.perf-header {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--border);
}
.perf-grade {
    font-size: 3rem; font-weight: 900;
    font-family: var(--font-mono); line-height: 1; flex-shrink: 0;
}
.perf-header-info { flex: 1; }
.perf-url  { font-size:.82rem; color:var(--rt-text-muted); word-break:break-all; margin-bottom:6px; }
.perf-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.8rem; color:var(--rt-text-muted); }
.perf-code { font-weight:800; font-family:var(--font-mono); }

.perf-waterfall { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.perf-wf-row {
    display: grid;
    grid-template-columns: 120px 1fr 60px;
    align-items: center; gap: 10px;
}
.perf-wf-label { font-size:.75rem; font-weight:700; color:var(--rt-text-muted); }
.perf-wf-bar-wrap { background:var(--bg-3); border-radius:4px; height:10px; overflow:hidden; }
.perf-wf-fill { height:100%; border-radius:4px; transition:width .4s ease; }
.perf-wf-ms   { font-size:.72rem; font-family:var(--font-mono); color:var(--rt-text); text-align:right; }

.perf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
}
.perf-stat-box {
    background:var(--bg-2); border:1px solid var(--border); border-radius:10px;
    padding:12px 14px; display:flex; flex-direction:column; gap:4px;
}
.perf-stat-val { font-size:1.1rem; font-weight:800; color:var(--rt-text); }
.perf-stat-lbl { font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--rt-text-dim); }

/* ══════════════════════════════════════════════════
   BLACKLIST CHECKER
   ══════════════════════════════════════════════════ */
.bl-header {
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
    gap:12px; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--border);
}
.bl-ip { font-size:1.2rem; font-weight:800; color:var(--rt-text); }
.bl-resolved { font-size:.75rem; color:var(--rt-text-dim); }
.bl-rep-badge {
    padding:5px 14px; border-radius:20px; font-size:.82rem; font-weight:700; border:1px solid;
}
.bl-rep-clean { background:rgba(34,197,94,.1); color:var(--rt-up); border-color:rgba(34,197,94,.2); }
.bl-rep-warn  { background:rgba(245,158,11,.1); color:var(--rt-degraded); border-color:rgba(245,158,11,.2); }
.bl-rep-bad   { background:var(--red-dim); color:var(--red); border-color:#ff4d4d33; }

.bl-score-row {
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    margin-bottom:20px;
}
.bl-score-bar-wrap { flex:1; min-width:100px; background:var(--bg-3); border-radius:6px; height:10px; overflow:hidden; }
.bl-score-fill { height:100%; border-radius:6px; transition:width .5s ease; }
.bl-score-pct  { font-family:var(--font-mono); font-size:.8rem; font-weight:700; color:var(--rt-text); white-space:nowrap; }
.bl-listed-count { font-size:.75rem; color:var(--rt-text-dim); white-space:nowrap; }

.bl-grid { display:flex; flex-direction:column; gap:16px; }
.bl-group-title {
    font-size:.66rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.09em; color:var(--rt-text-dim);
    margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--border);
}
.bl-row {
    display:flex; align-items:center; gap:12px;
    padding:10px 14px; border-radius:8px; border:1px solid var(--border);
}
.bl-row-ok     { background:rgba(34,197,94,.04); border-color:rgba(34,197,94,.15); }
.bl-row-listed { background:var(--red-dim);       border-color:#ff4d4d33; }
.bl-row-icon   { font-size:1rem; flex-shrink:0; }
.bl-row-info   { flex:1; }
.bl-row-name   { font-size:.85rem; font-weight:700; color:var(--rt-text); }
.bl-row-desc   { font-size:.72rem; color:var(--rt-text-dim); margin-top:2px; }
.bl-row-status {
    font-size:.72rem; font-weight:700; white-space:nowrap;
    padding:3px 9px; border-radius:20px;
}
.bl-row-ok     .bl-row-status { color:var(--rt-up);   background:rgba(34,197,94,.1); }
.bl-row-listed .bl-row-status { color:var(--red);     background:rgba(239,68,68,.1); }

/* ══════════════════════════════════════════════════
   DNS PROPAGATION
   ══════════════════════════════════════════════════ */
.prop-header {
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    margin-bottom:12px;
}
.prop-domain    { font-size:1.15rem; font-weight:800; color:var(--rt-text); }
.prop-type-badge{
    padding:3px 10px; border-radius:20px; font-size:.72rem; font-weight:700;
    background:var(--accent-dim); color:var(--accent); border:1px solid #00e5a033;
}
.prop-status { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:20px; }
.prop-badge  { font-size:.82rem; font-weight:700; padding:5px 12px; border-radius:8px; border:1px solid; }
.prop-ok   { background:rgba(34,197,94,.1); color:var(--rt-up);       border-color:rgba(34,197,94,.2); }
.prop-warn { background:rgba(245,158,11,.1); color:var(--rt-degraded); border-color:rgba(245,158,11,.2); }
.prop-stat { font-size:.75rem; color:var(--rt-text-dim); }

.prop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
.prop-resolver {
    border-radius: 10px; border: 1px solid var(--border);
    background: var(--bg-2); padding: 14px;
}
.pr-ok  { border-left: 3px solid var(--rt-up); }
.pr-nx  { border-left: 3px solid var(--rt-degraded); }
.pr-err { border-left: 3px solid var(--border); opacity: .6; }

.pr-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.pr-flag { font-size:1.2rem; flex-shrink:0; }
.pr-info { flex:1; }
.pr-name { font-size:.84rem; font-weight:700; color:var(--rt-text); }
.pr-loc  { font-size:.7rem; color:var(--rt-text-dim); }
.pr-ms   { font-size:.72rem; color:var(--rt-text-dim); white-space:nowrap; }

.pr-records { display:flex; flex-wrap:wrap; gap:5px; }
.prop-record {
    font-size:.72rem; padding:2px 8px; background:var(--bg-3);
    border:1px solid var(--border); border-radius:5px; color:var(--rt-text);
    word-break:break-all;
}
.prop-nx     { font-size:.75rem; color:var(--rt-degraded); font-style:italic; }
.prop-err-txt{ font-size:.75rem; color:var(--rt-text-dim); font-style:italic; }
.pr-ttl      { font-size:.68rem; color:var(--rt-text-dim); margin-top:6px; }

/* Nav dropdown — scrollable when many tools */
.nav-dropdown-menu { max-height: 80vh; overflow-y: auto; }

/* ══════════════════════════════════════════════════
   LIGHT THEME
   ══════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════
   LIGHT THEME — clean, warm, high contrast
   ══════════════════════════════════════════════════ */
[data-theme="light"] {
    --bg:        #f8fafc;   /* slate-50 */
    --bg-2:      #ffffff;
    --bg-3:      #f1f5f9;   /* slate-100 */
    --bg-card:   #ffffff;
    --border:    #e2e8f0;   /* slate-200 */
    --border-2:  #cbd5e1;   /* slate-300 */
    --text:      #0f172a;   /* slate-900 */
    --text-dim:  #475569;   /* slate-600 */
    --text-faint:#94a3b8;   /* slate-400 */
    --accent:    #059669;   /* emerald-600 — darker for light bg */
    --accent-dim:rgba(5,150,105,.12);
    --red:       #dc2626;
    --red-dim:   rgba(220,38,38,.1);
    --yellow:    #d97706;
    --shadow:    0 4px 16px rgba(15,23,42,.08);

    --rt-bg:#f8fafc; --rt-surface:#ffffff; --rt-surface2:#f1f5f9;
    --rt-border:#e2e8f0; --rt-border2:#cbd5e1;
    --rt-text:#0f172a; --rt-text-muted:#475569; --rt-text-dim:#94a3b8;
    --rt-up:#15803d;     --rt-up-bg:rgba(21,128,61,.08);  --rt-up-border:rgba(21,128,61,.2);
    --rt-degraded:#b45309; --rt-degraded-bg:rgba(180,83,9,.08); --rt-degraded-border:rgba(180,83,9,.2);
    --rt-down:#dc2626;   --rt-down-bg:rgba(220,38,38,.08); --rt-down-border:rgba(220,38,38,.2);
    --rt-partial:#c2410c;--rt-partial-bg:rgba(194,65,12,.08);
    --rt-maint:#7c3aed;  --rt-maint-bg:rgba(124,58,237,.08);
    --rt-unknown:#475569;--rt-unknown-bg:rgba(71,85,105,.08);
    --rt-accent:#059669; --rt-accent2:#4f46e5;
    color-scheme: light;
}

/* ── Global light resets ─────────────────────────── */
[data-theme="light"] body            { background: var(--bg); color: var(--text); }
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4              { color: var(--rt-text); }

/* Header */
[data-theme="light"] .site-header    { background: rgba(248,250,252,.95); border-bottom-color: var(--border); }
[data-theme="light"] .logo           { color: var(--rt-text); }
[data-theme="light"] .tld            { color: var(--rt-accent); }
[data-theme="light"] .live-badge     { background: rgba(5,150,105,.1); border-color: rgba(5,150,105,.25); color: var(--rt-accent); }
[data-theme="light"] .live-dot       { background: var(--rt-accent); }
[data-theme="light"] .logo-pulse     { background: var(--rt-accent); }
[data-theme="light"] .clock          { color: var(--rt-text-dim); }
[data-theme="light"] .nav-right      { gap: 8px; }

/* Nav dropdown */
[data-theme="light"] .nav-dropdown-menu { background: #fff; border-color: var(--border-2); box-shadow: 0 16px 48px rgba(15,23,42,.12); }
[data-theme="light"] .nav-dropdown-menu::before { background: #fff; }
[data-theme="light"] .nav-dropdown-item:hover  { background: var(--bg-3); }
[data-theme="light"] .nav-dropdown-item.current { background: rgba(5,150,105,.1); }
[data-theme="light"] .ndi-label      { color: var(--rt-text); }
[data-theme="light"] .ndi-desc       { color: var(--rt-text-dim); }
[data-theme="light"] .main-nav-link  { color: var(--rt-text-muted); }
[data-theme="light"] .main-nav-link:hover { background: var(--bg-3); color: var(--rt-text); }
[data-theme="light"] .main-nav-link.active { color: var(--rt-accent); background: rgba(5,150,105,.1); }

/* Mobile nav */
[data-theme="light"] .mobile-nav     { border-top-color: var(--border); }
[data-theme="light"] .mobile-nav-link:hover  { background: var(--bg-3); color: var(--rt-text); }
[data-theme="light"] .mobile-nav-link.active { background: rgba(5,150,105,.1); color: var(--rt-accent); }
[data-theme="light"] .mobile-nav-divider     { color: var(--rt-text-dim); }
[data-theme="light"] .nav-hamburger  { border-color: var(--border-2); }
[data-theme="light"] .nav-hamburger span { background: var(--rt-text-muted); }

/* Lang + theme buttons */
[data-theme="light"] .lang-btn.active { color: var(--rt-accent); background: rgba(5,150,105,.1); }
[data-theme="light"] .theme-toggle   { background: var(--bg-3); border: 1px solid #ddd; }
[data-theme="light"] .theme-icon-dark { display: none; }
[data-theme="light"] .theme-icon-light {
    display: inline;
}
.theme-icon-light {
    display: none;
}
.theme-toggle {
        width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    transition: background .2s, border-color .2s;
    flex-shrink: 0;
    padding: 0;
}
.lang-switch {
        display: flex;
    align-items: center;
    gap: 2px;
    font-size: .75rem;
    font-weight: 700;
}

.lang-btn {
    padding: 3px 7px;
    border-radius: 5px;
    color: var(--rt-text-muted);
    transition: color .15s, background .15s;
    text-decoration: none;
}

.lang-btn.active {
    color: var(--accent);
    background: var(--accent-dim);
}
/* Hero */
[data-theme="light"] .hero h1        { color: var(--rt-text); }
[data-theme="light"] .hero h1 em     { color: var(--rt-accent); }
[data-theme="light"] .hero p         { color: var(--rt-text-muted); }
[data-theme="light"] .global-status  { background: var(--bg-2); border-color: var(--border-2); }
[data-theme="light"] .global-status.all-good { background: rgba(5,150,105,.08); border-color: rgba(5,150,105,.2); }
[data-theme="light"] .global-status.issues   { background: rgba(220,38,38,.07); border-color: rgba(220,38,38,.2); }

/* Filters */
[data-theme="light"] .filters        { border-bottom-color: var(--border); }
[data-theme="light"] .filter         { background: var(--bg-2); border-color: var(--border); color: var(--text-dim); }
[data-theme="light"] .filter:hover   { border-color: var(--border-2); color: var(--rt-text); }
[data-theme="light"] .filter.active  { background: var(--rt-accent); color: #fff; border-color: var(--rt-accent); }

/* Service cards */
[data-theme="light"] .service-card   { background: #fff; border-color: var(--border); }
[data-theme="light"] .service-card:hover { border-color: var(--border-2); box-shadow: 0 8px 24px rgba(15,23,42,.08); }
[data-theme="light"] .sc-name        { color: var(--rt-text); }
[data-theme="light"] .sc-cat         { color: var(--rt-text-dim); }
[data-theme="light"] .sc-rt          { color: var(--rt-text-dim); }
[data-theme="light"] .sc-icon        { background: var(--bg-3); color: var(--rt-accent); }
[data-theme="light"] .sc-status.pending { color: var(--rt-text-dim); border-color: var(--border); }

/* Summary bar */
[data-theme="light"] .summary-bar    { background: var(--bg-2); border-color: var(--border); }
[data-theme="light"] .sum-val        { color: var(--rt-text); }
[data-theme="light"] .sum-key        { color: var(--rt-text-dim); }
[data-theme="light"] .sum-sep        { background: var(--border); }

/* About cards */
[data-theme="light"] .ab-card        { background: var(--bg-2); border-color: var(--border); }
[data-theme="light"] .ab-card h4     { color: var(--rt-text); }
[data-theme="light"] .ab-card p      { color: var(--rt-text-muted); }

/* Footer */
[data-theme="light"] .site-footer    { background: var(--bg-2); border-top-color: var(--border); }
[data-theme="light"] .logo-sm        { color: var(--rt-text); }
[data-theme="light"] .disc           { color: var(--rt-text-dim); }

/* Detail page */
[data-theme="light"] .dp-card        { background: var(--bg-2); border-color: var(--border); }
[data-theme="light"] .dp-card-flush  { background: var(--bg-2); }
[data-theme="light"] .dp-section-head { border-bottom-color: var(--border); }
[data-theme="light"] .dp-section-head h2 { color: var(--rt-text-muted); }
[data-theme="light"] .dp-section-head span { color: var(--rt-text-dim); }
[data-theme="light"] .dp-breadcrumb a { color: var(--rt-text-muted); }
[data-theme="light"] .dp-breadcrumb > span:last-child { color: var(--rt-text); }
[data-theme="light"] .dp-category    { color: var(--rt-text-dim); }
[data-theme="light"] .dp-title       { color: var(--rt-text); }
[data-theme="light"] .dp-desc        { color: var(--rt-text-muted); }
[data-theme="light"] .dp-meta-key    { color: var(--rt-text-dim); }
[data-theme="light"] .dp-meta-val    { color: var(--rt-text); }
[data-theme="light"] .dp-status-row  { background: var(--bg-2); border-color: var(--border); }
[data-theme="light"] .dp-stat-box    { background: var(--bg-2); border-color: var(--border); }
[data-theme="light"] .dp-stat-num    { color: var(--rt-text); }
[data-theme="light"] .dp-stat-lbl    { color: var(--rt-text-dim); }
[data-theme="light"] .dp-btn-ghost   { background: var(--bg-2); border-color: var(--border); color: var(--rt-text-muted); }
[data-theme="light"] .dp-btn-ghost:hover { color: var(--rt-text); border-color: var(--border-2); }

/* Charts */
[data-theme="light"] .chart-bar-area { /* inherit */ }
[data-theme="light"] .chart-tick     { color: var(--rt-text-dim); }
[data-theme="light"] .chart-tooltip-box { background: var(--bg-2); border-color: var(--border-2); color: var(--rt-text); }
[data-theme="light"] .uptime90-labels { color: var(--rt-text-dim); }
[data-theme="light"] .chart-foot     { /* inherit */ }
[data-theme="light"] .leg-item       { color: var(--rt-text-muted); }

/* Incidents */
[data-theme="light"] .inc-row        { /* inherit */ }
[data-theme="light"] .inc-border     { border-top-color: var(--border); }
[data-theme="light"] .inc-title      { color: var(--rt-text); }
[data-theme="light"] .inc-detail     { color: var(--rt-text-muted); }
[data-theme="light"] .inc-dur        { color: var(--rt-text-dim); }
[data-theme="light"] .inc-date       { color: var(--rt-text-dim); }

/* Service cards (detail page Other Services) */
[data-theme="light"] .service-name   { color: var(--rt-text); }
[data-theme="light"] .service-desc   { color: var(--rt-text-muted); }

/* Tool pages */
[data-theme="light"] .tool-hero      { border-bottom-color: var(--border); }
[data-theme="light"] .tool-hero h1   { color: var(--rt-text); }
[data-theme="light"] .tool-hero p    { color: var(--rt-text-muted); }
[data-theme="light"] .tool-hero-icon { background: var(--bg-3); border-color: var(--border); }
[data-theme="light"] .tool-result    { background: var(--bg-2); border-color: var(--border); }
[data-theme="light"] .tool-info-card { background: var(--bg-2); border-color: var(--border); }
[data-theme="light"] .tool-info-card h4 { color: var(--rt-text); }
[data-theme="light"] .tool-info-card p  { color: var(--rt-text-muted); }
[data-theme="light"] .tool-loading   { color: var(--rt-text-muted); }
[data-theme="light"] .tool-input     { background: #fff !important; color: var(--rt-text) !important; border-color: var(--border-2) !important; }
[data-theme="light"] .tool-input:focus { border-color: var(--rt-accent) !important; box-shadow: 0 0 0 3px rgba(5,150,105,.15) !important; }
[data-theme="light"] .tool-select    { background: #fff !important; color: var(--rt-text) !important; border-color: var(--border-2) !important; }
[data-theme="light"] .tool-btn       { background: var(--rt-accent); color: #fff; }
[data-theme="light"] .tool-btn-ghost { background: var(--bg-2); border-color: var(--border-2); color: var(--rt-text-muted); }
[data-theme="light"] .tool-btn-ghost:hover { background: var(--bg-3); color: var(--rt-text); }

/* DNS table */
[data-theme="light"] .dns-table th   { border-bottom-color: var(--border); color: var(--rt-text-dim); }
[data-theme="light"] .dns-table td   { border-bottom-color: var(--border); }
[data-theme="light"] .dns-table tr:hover td { background: var(--bg-3); }
[data-theme="light"] .dns-meta       { border-bottom-color: var(--border); }
[data-theme="light"] .dns-td-val     { color: var(--rt-text); }

/* HTTP headers */
[data-theme="light"] .hdr-table th   { border-bottom-color: var(--border); color: var(--rt-text-dim); }
[data-theme="light"] .hdr-table tr:hover td { background: var(--bg-3); }
[data-theme="light"] .chain-step     { background: var(--bg-3); border-color: var(--border); }
[data-theme="light"] .sec-row        { background: var(--bg-3); border-color: var(--border); }
[data-theme="light"] .sec-name       { color: var(--rt-text); }
[data-theme="light"] .sec-value      { color: var(--rt-text-muted); }

/* Port grid */
[data-theme="light"] .port-card      { background: var(--bg-2); }
[data-theme="light"] .port-card.port-closed { background: var(--bg-3); border-color: var(--border); }
[data-theme="light"] .port-summary   { border-bottom-color: var(--border); }

/* Propagation */
[data-theme="light"] .prop-resolver  { background: var(--bg-2); }
[data-theme="light"] .pr-name        { color: var(--rt-text); }
[data-theme="light"] .pr-loc         { color: var(--rt-text-dim); }
[data-theme="light"] .prop-record    { background: var(--bg-3); border-color: var(--border); color: var(--rt-text); }

/* SSL */
[data-theme="light"] .ssl-grid       { border-color: var(--border); }
[data-theme="light"] .ssl-row        { border-bottom-color: var(--border); }
[data-theme="light"] .ssl-row:nth-child(odd) { background: var(--bg-3); }
[data-theme="light"] .ssl-row-label  { color: var(--rt-text-dim); }
[data-theme="light"] .ssl-row-val    { color: var(--rt-text); }
[data-theme="light"] .ssl-san        { background: var(--bg-3); border-color: var(--border); color: var(--rt-text-muted); }

/* IP info */
[data-theme="light"] .ip-grid        { /* inherit */ }
[data-theme="light"] .ip-row:nth-child(odd) { background: var(--bg-3); }
[data-theme="light"] .ip-row-label   { color: var(--rt-text-dim); }
[data-theme="light"] .ip-row-val     { color: var(--rt-text); }
[data-theme="light"] .ip-address     { color: var(--rt-text); }

/* Perf */
[data-theme="light"] .perf-stat-box  { background: var(--bg-2); border-color: var(--border); }
[data-theme="light"] .perf-stat-val  { color: var(--rt-text); }
[data-theme="light"] .perf-stat-lbl  { color: var(--rt-text-dim); }
[data-theme="light"] .perf-wf-bar-wrap { background: var(--bg-3); }
[data-theme="light"] .perf-url       { color: var(--rt-text-muted); }

/* Blacklist */
[data-theme="light"] .bl-ip          { color: var(--rt-text); }
[data-theme="light"] .bl-row         { border-color: var(--border); }
[data-theme="light"] .bl-row-ok      { background: rgba(21,128,61,.04); border-color: rgba(21,128,61,.15); }
[data-theme="light"] .bl-row-listed  { background: rgba(220,38,38,.06); border-color: rgba(220,38,38,.15); }
[data-theme="light"] .bl-row-name    { color: var(--rt-text); }
[data-theme="light"] .bl-row-desc    { color: var(--rt-text-dim); }
[data-theme="light"] .bl-score-bar-wrap { background: var(--bg-3); }
[data-theme="light"] .bl-group-title { color: var(--rt-text-dim); border-bottom-color: var(--border); }

/* WHOIS */
[data-theme="light"] .whois-domain   { color: var(--rt-text); }
[data-theme="light"] .whois-server   { color: var(--rt-text-dim); }
[data-theme="light"] .whois-raw      { background: var(--bg-3); color: var(--rt-text-muted); }
[data-theme="light"] .whois-raw-toggle { background: var(--bg-3); color: var(--rt-text-muted); }
[data-theme="light"] .whois-raw-wrap { border-color: var(--border); }

/* Uptime calc */
[data-theme="light"] .uptime-result-row { background: var(--bg-2); border-color: var(--border); }
[data-theme="light"] .urr-period     { color: var(--rt-text-dim); }
[data-theme="light"] .urr-val        { color: var(--rt-text); }
[data-theme="light"] .uptime-slider  { background: var(--border-2); }
[data-theme="light"] .uptime-preset  { background: var(--bg-3); border-color: var(--border); color: var(--rt-text-muted); }
[data-theme="light"] .uptime-preset.active { background: rgba(5,150,105,.1); color: var(--rt-accent); border-color: rgba(5,150,105,.25); }

/* Global status (regional) */
[data-theme="light"] .global-node    { background: var(--bg-2); border-color: var(--border); }
[data-theme="light"] .global-city    { color: var(--rt-text); }
[data-theme="light"] .global-country { color: var(--rt-text-dim); }
[data-theme="light"] .global-notice-title { color: var(--rt-text); }
[data-theme="light"] .global-notice-desc  { color: var(--rt-text-muted); }

/* Region tabs */
[data-theme="light"] .region-tabs    { background: var(--bg-3); border-color: var(--border-2); }
[data-theme="light"] .region-tab     { color: var(--rt-text-muted); }
[data-theme="light"] .region-tab:hover { background: var(--bg-2); color: var(--rt-text); }
[data-theme="light"] .region-tab.active { background: var(--bg-2); color: var(--rt-accent); border-color: rgba(5,150,105,.25); box-shadow: 0 0 0 1px rgba(5,150,105,.15) inset; }

/* SEO blocks */
[data-theme="light"] .seo-content    { background: var(--bg-3); border-top-color: var(--border); }
[data-theme="light"] .seo-h2         { color: var(--rt-text); }
[data-theme="light"] .seo-main p     { color: var(--rt-text-muted); }
[data-theme="light"] .faq-item       { background: var(--bg-2); border-color: var(--border); }
[data-theme="light"] .faq-item h3    { color: var(--rt-text); }
[data-theme="light"] .faq-item p     { color: var(--rt-text-muted); }
[data-theme="light"] .seo-keywords span { background: var(--bg-2); border-color: var(--border); color: var(--rt-text-dim); }

/* Check layers */
[data-theme="light"] .cl-pill        { background: var(--bg-3); border-color: var(--border-2); color: var(--rt-text-muted); }
[data-theme="light"] .cl-pill.ok     { color: var(--rt-up); border-color: rgba(21,128,61,.2); background: rgba(21,128,61,.07); }
[data-theme="light"] .cl-label       { color: var(--rt-text-dim); }
[data-theme="light"] .cl-arrow       { color: var(--rt-text-faint); }

/* Server loc badge */
[data-theme="light"] .server-loc-badge { background: var(--bg-2); border-color: var(--border-2); color: var(--rt-text-muted); }

/* Region banner on detail page */
[data-theme="light"] .dp-region-banner { background: rgba(5,150,105,.08); border-color: rgba(5,150,105,.2); }

/* Pico in light mode */
[data-theme="light"] {
    --pico-background-color: var(--bg);
    --pico-card-background-color: var(--bg-card);
    --pico-card-border-color: var(--border);
    --pico-color: var(--text);
    --pico-h1-color: var(--rt-text);
    --pico-h2-color: var(--rt-text-muted);
    --pico-muted-color: var(--rt-text-dim);
}


/* ══════════════════════════════════════════════════
   SEO FAQ BLOCK
   ══════════════════════════════════════════════════ */
.seo-faq {
    margin-top: 48px; margin-bottom: 48px;
    padding-top: 32px; border-top: 1px solid var(--border);
}
.seo-faq h2 {
    font-size: .72rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--rt-text-dim); margin-bottom: 20px;
}
.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.faq-item {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 10px; padding: 18px 20px;
}
.faq-item h3 {
    font-size: .88rem; font-weight: 700; color: var(--rt-text);
    margin-bottom: 8px;
}
.faq-item p  { font-size: .82rem; color: var(--rt-text-muted); line-height: 1.6; margin: 0; }
.faq-item a  { color: var(--rt-accent); font-weight: 600; }
.faq-item a:hover { text-decoration: underline; }

/* Light theme adjustments */
[data-theme="light"] .faq-item { background: var(--bg-2); }
[data-theme="light"] .tool-info-card { background: var(--bg-2); }
[data-theme="light"] .ab-card { background: var(--bg-2); }
[data-theme="light"] .dp-card { background: var(--bg-2); }
[data-theme="light"] .global-node { background: var(--bg-2); }
[data-theme="light"] .prop-resolver { background: var(--bg-2); }
[data-theme="light"] .bl-row { background: var(--bg-2); }
[data-theme="light"] .dp-stat-box { background: var(--bg-2); }
[data-theme="light"] .uptime-result-row { background: var(--bg-2); }
[data-theme="light"] .port-card.port-closed { background: var(--bg-2); }
[data-theme="light"] .chain-step { background: var(--bg-2); }

/* ══════════════════════════════════════════════════
   REGION SELECTOR
   ══════════════════════════════════════════════════ */
.region-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.region-label {
    font-size: .8rem;
    font-weight: 700;
    color: var(--rt-text-muted);
    white-space: nowrap;
}
.region-select {
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    border-radius: 10px;
    padding: 7px 12px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--rt-text);
    cursor: pointer;
    outline: none;
    font-family: var(--font-sans);
    transition: border-color .2s, box-shadow .2s;
    appearance: auto;
}
.region-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

/* Regional status line */
.region-status {
    font-size: .78rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg-2);
    color: var(--rt-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.region-status.rs-loading {
    color: var(--rt-text-dim);
    animation: pulse-opacity 1.5s infinite;
}
.region-status.rs-ok    { color: var(--rt-up);   border-color: rgba(34,197,94,.2); background: rgba(34,197,94,.06); }
.region-status.rs-error { color: var(--rt-down); border-color: rgba(239,68,68,.2); background: rgba(239,68,68,.06); }
.rs-age { opacity: .65; font-weight: 400; }

@keyframes pulse-opacity { 0%,100%{opacity:1} 50%{opacity:.4} }

/* Light mode adjustments */
[data-theme="light"] .region-select { background: #fff; color: #1c2035; border-color: var(--border-2); }

/* ══════════════════════════════════════════════════
   DETAIL PAGE — REGION BANNER & HOME HIGHLIGHT
   ══════════════════════════════════════════════════ */
.dp-region-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    color: var(--rt-text-muted);
    background: var(--accent-dim);
    border: 1px solid rgba(0,229,160,.2);
    border-radius: 8px;
    padding: 8px 14px;
    margin-bottom: 16px;
}
.dp-region-banner strong { color: var(--accent); font-weight: 700; }
.dp-region-change { color: var(--accent); font-weight: 600; text-decoration: underline; }

/* Home region node highlight in global check */
.global-node.gn-home {
    border: 1px solid var(--accent) !important;
    background: var(--accent-dim) !important;
    order: -1; /* flex order: first */
}
.global-node.gn-home .global-city { color: var(--accent); font-weight: 700; }

/* Region select — progress bar total fix */
.region-status .rs-total {
    opacity: .6;
    font-weight: 400;
    font-size: .72rem;
}

/* ══════════════════════════════════════════════════
   REGION TABS — Frankfurt / Turkey switcher
   ══════════════════════════════════════════════════ */
.region-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.region-label { font-size: .78rem; font-weight: 700; color: var(--rt-text-dim); white-space: nowrap; }

/* Tab container — matches the dark card aesthetic */
.region-tabs {
    display: flex;
    gap: 0;
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    border-radius: 10px;
    padding: 3px;
    flex-shrink: 0;
}

.region-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 18px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    font-size: .82rem;
    font-weight: 700;
    color: var(--rt-text-muted);
    cursor: pointer;
    transition: all .15s;
    font-family: var(--font-sans);
    white-space: nowrap;
    letter-spacing: -.01em;
}
.region-tab:hover {
    color: var(--rt-text);
    background: var(--bg-3);
}
/* Active state: green accent glow — matches the site's operational badge */
.region-tab.active {
    background: var(--bg-3);
    color: var(--accent);
    border-color: rgba(0,229,160,.2);
    box-shadow: 0 0 0 1px rgba(0,229,160,.12) inset;
}

/* Light theme */
[data-theme="light"] .region-tabs { background: #fff; border-color: var(--border-2); }
[data-theme="light"] .region-tab:hover { background: var(--bg-3); }
[data-theme="light"] .region-tab.active {
    background: var(--bg-3);
    color: var(--accent);
    border-color: rgba(0,184,135,.25);
    box-shadow: 0 0 0 1px rgba(0,184,135,.15) inset;
}

/* ══════════════════════════════════════════════════
   SEO CONTENT BLOCK (service + tool pages)
   ══════════════════════════════════════════════════ */
.seo-content {
    background: var(--bg-2);
    border-top: 1px solid var(--border);
    padding: 48px 0;
    margin-top: 0;
}
.seo-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    margin-bottom: 32px;
}
@media (max-width: 768px) {
    .seo-grid { grid-template-columns: 1fr; gap: 24px; }
}
.seo-h2 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--rt-text);
    margin: 0 0 14px;
    line-height: 1.3;
}
.seo-main p { font-size: .9rem; color: var(--rt-text-muted); line-height: 1.7; margin: 0; }
.seo-faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}
.seo-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
.seo-keywords span {
    font-size: .72rem;
    color: var(--rt-text-dim);
    background: var(--bg-3);
    border: 1px solid var(--border);
    padding: 3px 10px;
    border-radius: 20px;
}
[data-theme="light"] .seo-content { background: var(--bg-3); }
[data-theme="light"] .seo-keywords span { background: var(--bg-2); }

/* ══════════════════════════════════════════════════
   NAV DROPDOWN — 2-column compact grid
   ══════════════════════════════════════════════════ */
.nav-dropdown-menu {
    width: 420px !important;  /* wider for 2 cols */
    padding: 10px !important;
}
.ndd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
}
.ndd-group { display: flex; flex-direction: column; gap: 1px; }
.ndd-group-title {
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--rt-text-dim);
    padding: 6px 8px 3px;
}
.nav-dropdown-item {
    display: flex !important;
    flex-direction: row !important;      /* icon + name inline */
    align-items: center !important;
    gap: 7px !important;
    padding: 6px 8px !important;         /* compact */
    border-radius: 6px !important;
}
.ndi-icon  { font-size: .95rem; flex-shrink: 0; width: 18px; text-align: center; }
.ndi-label { font-size: .8rem !important; font-weight: 600 !important; color: var(--rt-text) !important; }
.ndi-desc  { display: none !important; }  /* hidden in compact mode */
.nav-dropdown-item.current .ndi-label { color: var(--rt-accent) !important; }

[data-theme="light"] .ndd-group-title { color: var(--rt-text-dim); }
[data-theme="light"] .ndi-label { color: var(--rt-text) !important; }

/* ══════════════════════════════════════════════════
   BASE64 TOOL
   ══════════════════════════════════════════════════ */
.base64-wrap {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: start;
}
.b64-col    { display: flex; flex-direction: column; gap: 8px; }
.b64-label  { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--rt-text-dim); }
.b64-area   {
    width: 100%; height: 180px; resize: vertical;
    background: var(--bg-2); border: 1px solid var(--border-2);
    border-radius: 10px; padding: 12px 14px;
    font-size: .85rem; color: var(--rt-text);
    font-family: var(--font-sans);
    outline: none; transition: border-color .15s;
}
.b64-area.mono { font-family: var(--font-mono); font-size: .78rem; }
.b64-area:focus { border-color: var(--rt-accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.b64-actions { display: flex; gap: 6px; }
.b64-divider {
    font-size: 1.4rem; color: var(--rt-text-dim);
    padding-top: 46px; text-align: center; cursor: default;
}
@media (max-width: 640px) {
    .base64-wrap { grid-template-columns: 1fr; }
    .b64-divider { padding-top: 0; }
}
[data-theme="light"] .b64-area { background: #fff; border-color: var(--border-2); color: var(--rt-text); }

/* ══════════════════════════════════════════════════
   HTTP STATUS CODES
   ══════════════════════════════════════════════════ */
.hsc-group { margin-bottom: 24px; }
.hsc-group-header {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px; margin-bottom: 4px;
    background: var(--bg-2); border-radius: 10px;
    border-left: 4px solid;
}
.hsc-code-range { font-size: 1rem; font-weight: 800; }
.hsc-group-name { font-size: .9rem; font-weight: 700; color: var(--rt-text); }
.hsc-group-count { font-size: .72rem; color: var(--rt-text-dim); margin-left: auto; }
.hsc-row {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 10px 16px; border-radius: 8px;
    transition: background .12s;
}
.hsc-row:hover { background: var(--bg-3); }
.hsc-code { font-size: .95rem; font-weight: 800; min-width: 44px; flex-shrink: 0; padding-top: 1px; }
.hsc-body { flex: 1; }
.hsc-name { font-size: .88rem; font-weight: 700; color: var(--rt-text); margin-bottom: 2px; }
.hsc-desc { font-size: .8rem; color: var(--rt-text-muted); line-height: 1.5; }
[data-theme="light"] .hsc-group-header { background: var(--bg-3); }
[data-theme="light"] .hsc-row:hover    { background: var(--bg-3); }
[data-theme="light"] .hsc-name { color: var(--rt-text); }
[data-theme="light"] .hsc-desc { color: var(--rt-text-muted); }

/* Ping result grid (reuse global-node) */
.ping-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.ping-node { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-2); }
.ping-node.gn-up   { border-left: 3px solid var(--rt-up); }
.ping-node.gn-down { border-left: 3px solid var(--rt-down); }
.ping-node.gn-pending { opacity: .5; }
.ping-flag  { font-size: 1.3rem; flex-shrink: 0; }
.ping-info  { flex: 1; min-width: 0; }
.ping-city  { font-size: .78rem; font-weight: 700; color: var(--rt-text); }
.ping-cc    { font-size: .68rem; color: var(--rt-text-dim); }
.ping-ms    { font-size: .72rem; font-family: var(--font-mono); color: var(--rt-up); white-space: nowrap; }
.gn-down .ping-ms { color: var(--rt-down); }
[data-theme="light"] .ping-node { background: var(--bg-2); }

/* ══════════════════════════════════════════════════
   SSL CONVERT TOOL
   ══════════════════════════════════════════════════ */
.sslc-ops {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.sslc-op {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--border-2);
    background: var(--bg-2);
    color: var(--rt-text-muted);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: .82rem;
    font-weight: 600;
    transition: all .15s;
}
.sslc-op:hover  { color: var(--rt-text); border-color: var(--rt-accent); }
.sslc-op.active { background: var(--accent-dim); color: var(--rt-accent); border-color: rgba(0,214,143,.3); }

.sslc-panel    { display: none; flex-direction: column; gap: 10px; }
.sslc-panel.active { display: flex; }

.sslc-hint {
    font-size: .82rem;
    color: var(--rt-text-muted);
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    line-height: 1.6;
}
.sslc-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--rt-text-dim);
    margin-bottom: -4px;
}
.sslc-textarea {
    width: 100%; height: 160px; resize: vertical;
    background: var(--bg-2); border: 1px solid var(--border-2);
    border-radius: 10px; padding: 12px 14px;
    font-size: .78rem; color: var(--rt-text); font-family: var(--font-mono);
    outline: none; transition: border-color .15s;
}
.sslc-textarea:focus { border-color: var(--rt-accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.sslc-row {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.sslc-file-input { display: none; }
.sslc-2col {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.sslc-cert-info {
    font-size: .85rem;
    color: var(--rt-text-muted);
    padding: 10px 14px;
    background: rgba(63,185,80,.08);
    border: 1px solid rgba(63,185,80,.2);
    border-radius: 8px;
    margin-bottom: 8px;
}

[data-theme="light"] .sslc-op       { background: #fff; border-color: var(--border-2); }
[data-theme="light"] .sslc-op.active { background: rgba(5,150,105,.1); color: var(--rt-accent); border-color: rgba(5,150,105,.3); }
[data-theme="light"] .sslc-hint     { background: var(--bg-3); border-color: var(--border); }
[data-theme="light"] .sslc-textarea { background: #fff; color: var(--rt-text); border-color: var(--border-2); }

@media (max-width: 640px) {
    .sslc-2col { grid-template-columns: 1fr; }
    .sslc-ops  { flex-direction: column; }
    .sslc-op   { justify-content: center; }
}

/* ── Homepage Blog Preview ──────────────────────────── */
.home-blog { margin: 40px 0 20px; }
.home-blog-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin-bottom: 24px;
    padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.home-blog-header h2 {
    font-size: 1.15rem; font-weight: 800; color: var(--rt-text); margin: 0 0 4px;
}
.home-blog-header p { font-size: .82rem; color: var(--rt-text-muted); margin: 0; }
.home-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}
.home-blog-card {
    display: flex; flex-direction: column;
    background: var(--bg-2); border: 1px solid var(--border);
    border-radius: 12px; overflow: hidden; text-decoration: none;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.home-blog-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-2);
    box-shadow: 0 10px 28px rgba(0,0,0,.2);
    text-decoration: none;
}
.home-blog-img {
    aspect-ratio: 16/9; overflow: hidden;
}
.home-blog-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.home-blog-card:hover .home-blog-img img { transform: scale(1.04); }
.home-blog-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-3); font-size: 2rem;
}
.home-blog-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.home-blog-meta { font-size: .7rem; color: var(--rt-text-dim); display: flex; gap: 6px; }
.home-blog-title { font-size: .92rem; font-weight: 700; color: var(--rt-text); line-height: 1.35; }
.home-blog-excerpt {
    font-size: .8rem; color: var(--rt-text-muted); line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
[data-theme="light"] .home-blog-card { background: #fff; }
[data-theme="light"] .home-blog-card:hover { box-shadow: 0 8px 24px rgba(15,23,42,.1); }
[data-theme="light"] .home-blog-placeholder { background: var(--bg-3); }