/* Webmaster Araçları — Ana Site Tasarımıyla Uyumlu */

/* ---- Temel Reset & Font ---- */
*, ::before, ::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-family: Inter, sans-serif; }
body { margin: 0; }

/* ---- Custom Properties ---- */
:root {
  --primary:   #2563eb;
  --secondary: #0ea5e9;
  --accent:    #1e40af;
}

/* ---- Accessibility ---- */
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0; }
*:focus-visible { outline: 2px solid #0ea5e9; outline-offset: 2px; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #030303; }
::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, #0284c7, #0ea5e9); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(to bottom, #3730a3, #0284c7); }

/* ---- Premium Glass ---- */
.premium-glass {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 32px 0 rgba(0,0,0,0.37);
}
.premium-glass-hover:hover {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.2);
  transform: translateY(-5px);
  box-shadow: 0 15px 45px -10px rgba(37,99,235,0.25);
}

/* ---- Text Shimmer ---- */
.text-shimmer {
  background: linear-gradient(to right, #fff 20%, #3b82f6 40%, #2563eb 60%, #fff 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}
@keyframes shimmer { to { background-position: 200% center; } }

/* ---- Animations ---- */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-20px); }
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes menuFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

/* ---- Scroll Animations ---- */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.animate-on-scroll.visible { opacity: 1; transform: translateY(0); }

/* ---- Section Fades ---- */
#hero, #tools { position: relative; }
#tools::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to bottom, #000 0%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}
#tools::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to top, #000 0%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

/* ---- Tool Filter Buttons ---- */
.tool-filter {
  background: rgba(255,255,255,0.05);
  color: #94a3b8;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 9999px;
  padding: 0.625rem 1.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
}
.tool-filter:hover {
  background: rgba(37,99,235,0.15);
  color: #fff;
  border-color: rgba(37,99,235,0.3);
}
.tool-filter.active {
  background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(37,99,235,0.4);
}

/* ---- Tool Cards ---- */
.tool-card {
  transition: all 0.3s ease;
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
}
.tool-card:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(37,99,235,0.3);
  transform: translateY(-4px);
  box-shadow: 0 15px 45px -10px rgba(37,99,235,0.2);
}
.tool-card.hidden { display: none; }

/* ---- Tailwind-like utilities (dark mode only) ---- */
.font-display { font-family: Inter, sans-serif; }
.bg-black { background-color: #000; }
.text-slate-100 { color: #f1f5f9; }
.text-slate-400 { color: #94a3b8; }
.text-slate-500 { color: #64748b; }
.text-white { color: #fff; }
.text-primary { color: #2563eb; }
.overflow-x-hidden { overflow-x: hidden; }
.pointer-events-none { pointer-events: none; }
.select-none { user-select: none; }

/* ---- Responsive nav ---- */
@media (min-width: 1280px) {
  #main-nav { display: flex !important; }
}

/* ---- Reduce motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Tool Page Form Cards ---- */
.tool-form-card,
.relative.overflow-hidden.rounded-3xl.premium-glass {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
}

/* Input dark theme */
input[type="url"],
input[type="text"],
input[type="email"],
textarea,
select {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #f1f5f9 !important;
}
input::placeholder,
textarea::placeholder {
  color: #64748b !important;
}
input:focus,
textarea:focus,
select:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.2) !important;
  outline: none !important;
}

/* Result cards dark */
.bg-white\/5.backdrop-blur-xl {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* Stat cards */
.bg-slate-50,
.dark .bg-slate-50 {
  background: rgba(255,255,255,0.04) !important;
}
.bg-slate-100,
.dark .bg-slate-100 {
  background: rgba(255,255,255,0.06) !important;
}

/* Progress bar track */
.bg-slate-100.dark\:bg-slate-800 {
  background: rgba(255,255,255,0.08) !important;
}

/* Ping animation */
@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

/* ---- JS ile üretilen result card'ları için dark tema ---- */
#results .bg-white,
#results [class*="bg-white"] {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #f1f5f9 !important;
}
#results [class*="text-slate-900"],
#results [class*="text-slate-800"],
#results [class*="text-slate-700"] {
  color: #f1f5f9 !important;
}
#results [class*="text-slate-600"],
#results [class*="text-slate-500"],
#results [class*="text-slate-400"] {
  color: #94a3b8 !important;
}
#results [class*="bg-slate-50"],
#results [class*="bg-slate-100"],
#results [class*="bg-slate-800"] {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.06) !important;
}
#results [class*="border-slate-200"],
#results [class*="border-slate-100"] {
  border-color: rgba(255,255,255,0.08) !important;
}
#results [class*="bg-indigo-50"],
#results [class*="bg-indigo-900"] {
  background: rgba(99,102,241,0.1) !important;
}
#results [class*="border-indigo-100"],
#results [class*="border-indigo-800"] {
  border-color: rgba(99,102,241,0.2) !important;
}
#results [class*="text-indigo-900"],
#results [class*="text-indigo-800"] {
  color: #a5b4fc !important;
}
#results [class*="text-indigo-300"],
#results [class*="text-indigo-200"] {
  color: #c7d2fe !important;
}

/* Loading spinner */
#loading {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #94a3b8 !important;
}

/* Label dark */
label {
  color: #f1f5f9 !important;
}

/* Submit button hover */
button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px -10px rgba(37,99,235,0.4) !important;
}

/* Rounded result containers */
#results .rounded-\[2\.5rem\],
#results .rounded-3xl {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* Copy/action buttons */
button:not([type="submit"]):not(.tool-filter):not(#mobile-menu-toggle):not(#mobile-menu-close-internal):not(#rocket-btn) {
  transition: all 0.2s;
}