/* ====== WP Rank Checker • Premium UI ====== */
:root{
  --wprc-bg:#f5f7fb;
  --wprc-card:#ffffff;
  --wprc-text:#0f172a;
  --wprc-muted:#6b7280;
  --wprc-border:#e7eaf0;
  --wprc-accent:#0b75b5;     /* markanıza göre mavi */
  --wprc-success:#16a34a;
  --wprc-warning:#eab308;
  --wprc-radius:18px;
  --wprc-shadow: 0 16px 40px rgba(15, 23, 42, .08);
}

/* Kart */
.wprc-card{
  padding:22px 22px 14px;
  background:var(--wprc-card);
  border:1px solid var(--wprc-border);
  border-radius:var(--wprc-radius);
  box-shadow:var(--wprc-shadow);
  color:var(--wprc-text);
}

/* Grid */
.wprc-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px 22px;
}
@media (max-width: 1024px){ .wprc-grid{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 640px){ .wprc-grid{ grid-template-columns: 1fr;} }

/* Alan + etiket + ikon */
.wprc-field{ position:relative; }
.wprc-label{
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--wprc-muted);
  letter-spacing:.2px; margin-bottom:6px;
}
.wprc-ico{ display:inline-flex; align-items:center; color:var(--wprc-accent); }

/* Input / Select */
#wprc-form input[type="text"],
#wprc-form select{
  width:100%;
  background:transparent;
  border:0;
  padding:10px 2px 8px;
  font-size:16px;
  color:var(--wprc-text);
  outline:none;
}
#wprc-form ::placeholder{ color:#9aa3b2; }

/* Alt çizgi – focus animasyonu */
.wprc-underline{
  position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--wprc-border);
}
.wprc-field:focus-within .wprc-underline{
  height:2px; background:var(--wprc-accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--wprc-accent) 18%, transparent);
}

/* Select oku */
#wprc-form select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image: linear-gradient(45deg, transparent 50%, #7b8794 50%),
                    linear-gradient(135deg, #7b8794 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% - 4px),
                       calc(100% - 11px) calc(50% + 4px);
  background-size: 6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:34px;
}

/* Alt kısım */
.wprc-footer{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; margin-top:16px;
  border-top:1px solid var(--wprc-border);
}
.wprc-small{ font-size:12px; color:var(--wprc-muted); display:block; margin-bottom:4px; }
.wprc-num{ min-width:120px; }

/* Buton */
.wprc-btn{
  display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--wprc-accent) 90%, #fff 0%), var(--wprc-accent));
  color:#fff; font-weight:700; letter-spacing:.2px;
  border:0; border-radius:12px; padding:12px 18px;
  box-shadow:0 10px 22px color-mix(in srgb, var(--wprc-accent) 30%, transparent);
  cursor:pointer; transition: transform .06s ease, filter .2s ease, box-shadow .2s ease;
}
.wprc-btn:hover{ filter:brightness(1.06); }
.wprc-btn:active{ transform: translateY(1px); }
.wprc-btn-ico{ display:inline-flex; }

/* Sonuç kartı */
#wprc-result{ margin-top:18px; }
#wprc-result .wprc-card{
  padding:16px !important;
}
#wprc-result .wprc-card.success{ border-color: color-mix(in srgb, var(--wprc-success) 35%, var(--wprc-border)); }
#wprc-result .wprc-card.warning{ border-color: color-mix(in srgb, var(--wprc-warning) 40%, var(--wprc-border)); }
#wprc-result strong{ color:#0b1220; }

/* “Sıra: #x” satırı */
.wprc-rank{
  font-size:22px; margin:8px 0 0; line-height:1.2; font-weight:800;
}

/* Yükleniyor spinner’ı */
#wprc-result em{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  color:var(--wprc-muted);
}
#wprc-result em::before{
  content:""; width:16px; height:16px; border-radius:50%;
  border:2px solid var(--wprc-border); border-top-color:var(--wprc-accent);
  animation:wprc-spin .7s linear infinite;
}

/* Koyu tema otomatik uyum */
@media (prefers-color-scheme: dark){
  :root{
    --wprc-bg:#0b0b0f;
    --wprc-card:#121216;
    --wprc-text:#e6e7eb;
    --wprc-muted:#9aa3af;
    --wprc-border:#26262c;
  }
  #wprc-form ::placeholder{ color:#8a93a2; }
}

/* Animasyon */
@keyframes wprc-spin{ to{ transform: rotate(360deg);} }