report.css

/* GLOBAL AYARLAR */
body {
  margin: 0;
  padding: 0;
  background-color: #f3f4f6;
  /* Hafif nokta deseni ekleyelim */
  background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
  background-size: 20px 20px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #1f2937;
  padding-top: 80px; /* Header yüksekliği kadar boşluk */
}

/* --- MODERN ÜST BAR (NAVBAR) --- */
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background: rgba(255, 255, 255, 0.9); /* Yarı saydam beyaz */
  backdrop-filter: blur(10px); /* Buzlu cam efekti */
  border-bottom: 1px solid #e5e7eb;
  z-index: 1000;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center; /* İçeriği ortalar */
}

.nav-content {
  width: 100%;
  max-width: 210mm; /* A4 kağıt genişliğiyle aynı yapıyoruz */
  padding: 0 40px; /* Kağıt padding'i ile uyumlu */
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

/* Logo Alanı */
.brand-area {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo-icon {
  font-size: 24px;
}
.brand-text {
  display: flex;
  flex-direction: column;
}
.app-name {
  font-weight: 700;
  font-size: 16px;
  color: #111827;
  line-height: 1.2;
}
.report-label {
  font-size: 11px;
  color: #6b7280;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* İndir Butonu */
.btn-primary-action {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #2563eb;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

.btn-primary-action:hover {
  background-color: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(37, 99, 235, 0.3);
}
.btn-primary-action svg {
  width: 16px;
  height: 16px;
}

/* --- RAPOR KAĞIDI --- */
.paper {
  width: 210mm;
  min-height: 297mm;
  background: white;
  margin: 0 auto 40px auto; /* Ortala ve alt boşluk bırak */
  padding: 50px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  position: relative;
  border-radius: 2px;
}

/* Diğer Rapor Stilleri (Aynen Kalıyor) */
.report-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
h1 { margin: 0; font-size: 26px; letter-spacing: -0.5px; color: #111827; }
.url-link { font-size: 14px; color: #2563eb; text-decoration: none; font-weight: 500; }
/* report.css içinde bulun ve değiştirin */

.score-circle { 
  width: 70px; 
  height: 70px; 
  border-radius: 50%; 
  /* Varsayılan renkler (JS bunları ezecek ama güvenlik için) */
  background: #e2e8f0; 
  color: #334155; 
  
  display: flex; 
  justify-content: center; 
  align-items: center; 
  font-size: 28px; 
  font-weight: 800; 
  border: 4px solid #cbd5e1; /* Varsayılan gri çerçeve */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}
.meta-info { font-size: 13px; color: #6b7280; margin-bottom: 20px; }
hr { border: 0; border-top: 1px solid #e5e7eb; margin: 20px 0 30px 0; }

.section { margin-bottom: 40px; }
h2 { font-size: 18px; color: #1f2937; border-left: 5px solid #3b82f6; padding-left: 12px; margin-bottom: 20px; }

/* Detay Blokları */
.detail-block { margin-bottom: 25px; border-bottom: 1px solid #f3f4f6; padding-bottom: 15px; }
.detail-block:last-child { border-bottom: none; }
.detail-block h4 { color: #374151; margin: 0 0 8px 0; font-size: 15px; font-weight: 600; }
.detail-block p { font-size: 14px; color: #4b5563; line-height: 1.6; margin: 4px 0; }
.info-text { font-style: italic; color: #6b7280; font-size: 13px; background: #f9fafb; padding: 10px; border-radius: 6px; border: 1px solid #e5e7eb; }

/* Özet Kutuları */
.summary-box { padding: 16px; border-radius: 8px; font-size: 14px; line-height: 1.6; }
.good-text { color: #15803d; background: #dcfce7; border: 1px solid #bbf7d0; }
.warn-text { color: #b45309; background: #fef3c7; border: 1px solid #fde68a; }
.error-text { color: #b91c1c; background: #fee2e2; border: 1px solid #fecaca; }

/* Aksiyon Planı */
.action-plan { display: flex; flex-direction: column; gap: 12px; }
.action-item { display: flex; align-items: flex-start; background: #f8fafc; border: 1px solid #e2e8f0; padding: 16px; border-radius: 8px; }
.action-num { width: 28px; height: 28px; background: #334155; color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: bold; margin-right: 12px; flex-shrink: 0; font-size: 13px; }
.action-title { font-weight: 700; margin-bottom: 4px; font-size: 14px; }
.action-title.error { color: #dc2626; }
.action-title.warn { color: #d97706; }
.action-desc { font-size: 13px; color: #475569; line-height: 1.5; }

/* Google Preview */
.google-preview { background: #fff; padding: 16px; border-radius: 8px; border: 1px solid #dfe1e5; font-family: arial, sans-serif; }
.g-cite { color: #202124; font-size: 14px; display: flex; align-items: center; margin-bottom: 5px; }
.g-cite span { background: #f1f3f4; border-radius: 50%; width: 18px; height: 18px; display: inline-block; margin-right: 12px; }

/* Yazdırma (Print) Ayarları */
@media print {
  body { background: white; padding-top: 0; background-image: none; }
  .top-nav { display: none !important; }
  .paper { box-shadow: none; margin: 0; width: 100%; padding: 30px; page-break-after: always; border: none; }
  .paper:last-child { page-break-after: auto; }
  .section { page-break-inside: avoid; }
}