/* v1.31.24 — Hat Ata ana sayfa light teması (PageLines/OpenClaw referans)
   Sadece index.html kullanır. Diğer sayfalar style.css (dark) ile devam eder. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* Sadece home-light class'lı body için scope — diğer sayfaları etkilemez */
body.home-light,
body.home-light *,
body.home-light *::before,
body.home-light *::after { box-sizing: border-box; }

body.home-light {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: #F7F7F8;
  color: #0A0A0A;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
  margin: 0;
}
/* Tüm link'ler — Tailwind preflight yoksa default altı çizili gelir */
body.home-light a { text-decoration: none; color: inherit; }
body.home-light a:hover { text-decoration: none; }
body.home-light ul { list-style: none; padding: 0; margin: 0; }
body.home-light code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

body.home-light h1,
body.home-light h2,
body.home-light h3,
body.home-light h4 {
  color: #0A0A0A;
  letter-spacing: -0.035em;
  font-weight: 800;
}

body.home-light h1.display,
body.home-light h2.display {
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

body.home-light .muted { color: #6B7280; }
body.home-light .muted-2 { color: #9CA3AF; }

/* Üst bar */
body.home-light .topbar {
  background: rgba(247, 247, 248, 0.85);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid #EAEAEC;
}
body.home-light .topbar a.nav-link {
  color: #4B5563;
  font-weight: 500;
  transition: color 0.15s;
}
body.home-light .topbar a.nav-link:hover { color: #0A0A0A; }

/* Brand mark (küçük ikon) */
body.home-light .mark {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #0A0A0A; color: #fff;
  border-radius: 8px;
  font-weight: 800; font-size: 14px;
  letter-spacing: -0.02em;
}

/* Status chip (● yeşil nokta + metin) */
body.home-light .status-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}
body.home-light .status-chip .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
  animation: hatata-pulse 2.2s ease-in-out infinite;
}
@keyframes hatata-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55), 0 0 0 3px rgba(34, 197, 94, 0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0), 0 0 0 3px rgba(34, 197, 94, 0.08); }
}
@media (prefers-reduced-motion: reduce) {
  body.home-light .status-chip .dot { animation: none; }
}

/* Buton: siyah pill */
body.home-light .btn-dark {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  background: #0A0A0A;
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  transition: transform 0.15s ease, background 0.15s;
  border: none;
  text-decoration: none;
  cursor: pointer;
}
body.home-light .btn-dark:hover {
  background: #1F1F21;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 24px -8px rgba(10,10,10,0.35);
}
body.home-light .btn-dark:active { transform: translateY(0) scale(0.99); }
body.home-light .btn-dark.block { width: 100%; display: flex; }

/* Buton: ghost (ikon + metin, arkaplansız) */
body.home-light .btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: transparent;
  color: #0A0A0A;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.15s;
}
body.home-light .btn-ghost:hover { background: rgba(10,10,10,0.05); }

/* Buton: light pill (siyah tema section üstünde) */
body.home-light .btn-light {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  background: #fff;
  color: #0A0A0A;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: transform 0.15s, background 0.15s;
}
body.home-light .btn-light:hover { background: #F3F4F6; transform: translateY(-1px); }

body.home-light .btn-ghost-light {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: transparent;
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.15s;
}
body.home-light .btn-ghost-light:hover { background: rgba(255,255,255,0.08); }

/* Plan chip (üst sağda "○ Free" tarzı) */
body.home-light .plan-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
}
body.home-light .plan-chip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #9CA3AF;
}

/* 6 kart grid — desktop 6 / tablet 3 / mobile 2 / tiny 1 */
body.home-light .feat-grid-6 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1100px) { body.home-light .feat-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 640px)  { body.home-light .feat-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 380px)  { body.home-light .feat-grid-6 { grid-template-columns: 1fr; } }

/* Kartlar — açık gri, no border, canlı hover */
body.home-light .tile {
  background: #EFEFF1;
  border-radius: 14px;
  padding: 18px 16px;
  transition: background 0.25s cubic-bezier(.4,0,.2,1),
              transform 0.25s cubic-bezier(.4,0,.2,1),
              box-shadow 0.25s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
  cursor: default;
}
body.home-light .tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.04) 100%);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}
body.home-light .tile:hover {
  background: #E4E4E7;
  transform: translateY(-4px);
  box-shadow: 0 14px 28px -12px rgba(0,0,0,0.18), 0 4px 8px -4px rgba(0,0,0,0.08);
}
body.home-light .tile:hover::before { opacity: 1; }
body.home-light .tile:hover .ic { transform: scale(1.12) rotate(-4deg); }

body.home-light .tile .ic {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  transition: transform 0.28s cubic-bezier(.4,0,.2,1);
}
body.home-light .tile h3 {
  font-size: 14px; font-weight: 700; margin-bottom: 4px; color: #0A0A0A;
  letter-spacing: -0.015em;
}
body.home-light .tile p {
  font-size: 12px; color: #6B7280; line-height: 1.5;
}

/* İkon SVG boyutu feat-grid-6 içinde compact */
body.home-light .feat-grid-6 .tile .ic svg { width: 22px; height: 22px; }

/* Beyaz kartlar (fiyatlandırma, bayi) */
body.home-light .pane {
  background: #fff;
  border: 1px solid #EAEAEC;
  border-radius: 18px;
  padding: 26px;
  transition: border-color 0.25s cubic-bezier(.4,0,.2,1),
              transform 0.25s cubic-bezier(.4,0,.2,1),
              box-shadow 0.25s cubic-bezier(.4,0,.2,1);
}
body.home-light .pane:hover {
  border-color: #0A0A0A;
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -12px rgba(0,0,0,0.18), 0 4px 10px -4px rgba(0,0,0,0.08);
}
body.home-light .pane.featured {
  border-color: #0A0A0A;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,0.18);
}
body.home-light .badge-top {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: #0A0A0A; color: #fff;
  padding: 4px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em;
  /* text-transform: uppercase KALDIRILDI — Türkçe Ü → U'ya dönmesin. Metin elle büyük yazılır. */
  white-space: nowrap;
}

/* Eyebrow label — Türkçe karakter bozulmasın diye text-transform KULLANMA;
   HTML'te metin elle BÜYÜK harfle yazılır (ÇALIŞTIĞI, POPÜLER korunur). */
body.home-light .eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: #6B7280;
  display: inline-block;
}

/* Divider */
body.home-light .hr-soft {
  border: none; border-top: 1px solid #EAEAEC; margin: 0;
}

/* Dark section (testimonial/footer) */
body.home-light .dark-sec {
  background: #0A0A0A;
  color: #fff;
  border-radius: 24px;
}
body.home-light .dark-sec h2,
body.home-light .dark-sec h3 { color: #fff; }
body.home-light .dark-sec .muted { color: rgba(255,255,255,0.6); }
body.home-light .dark-sec .muted-2 { color: rgba(255,255,255,0.4); }

/* Footer büyük wordmark (PDF'teki gibi outline) */
body.home-light .wordmark {
  font-size: clamp(80px, 16vw, 220px);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.18);
  user-select: none;
  text-align: center;
  margin-top: 40px;
}

/* Özellikler ikon renkleri (monokrom + tek aksent) */
body.home-light .ic-orange { color: #F97316; }
body.home-light .ic-blue   { color: #2563EB; }
body.home-light .ic-green  { color: #16A34A; }
body.home-light .ic-purple { color: #7C3AED; }
body.home-light .ic-amber  { color: #D97706; }
body.home-light .ic-indigo { color: #4F46E5; }

/* Slider container (paketler) */
body.home-light #pkgSliderHome {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 8px 4px 16px;
  scrollbar-width: none;
}
body.home-light #pkgSliderHome::-webkit-scrollbar { display: none; }
body.home-light #pkgSliderHome .pkg-slide {
  min-width: 260px; max-width: 300px;
  scroll-snap-align: start; flex-shrink: 0;
}
@media (min-width: 1280px) {
  body.home-light #pkgSliderHome { justify-content: center; flex-wrap: wrap; }
}
body.home-light .pkg-tag-sm {
  display: inline-block; font-size: 11px; padding: 2px 8px;
  border-radius: 6px; background: #F3F4F6; color: #4B5563;
  margin-right: 4px; font-weight: 500;
}

/* Küçük step numarası dairesi */
body.home-light .step-num {
  width: 44px; height: 44px; border-radius: 50%;
  background: #0A0A0A; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px;
  letter-spacing: -0.02em;
}

/* Anchor scroll offset */
body.home-light { scroll-padding-top: 80px; }
html:has(body.home-light) { scroll-behavior: smooth; }

/* Responsive hero */
@media (max-width: 640px) {
  body.home-light h1.display { font-size: 44px !important; }
  body.home-light h2.display { font-size: 36px !important; }
}

/* ─────────────────────────────────────────────────────────────
   LEGACY CLASS OVERRIDES — eski dark tema class'larını light'a çevir.
   Alt sayfalar (nasil-calisir, fiyatlandirma, bayimiz-olun, destek, sss, yasal/*)
   mevcut HTML'leriyle çalışsın diye. Body'ye `home-light` class verildiğinde aktif.
   ───────────────────────────────────────────────────────────── */

/* Eski gradient (mavi) → düz siyah */
body.home-light .gradient-bg {
  background: #0A0A0A !important;
  color: #fff;
}
body.home-light .gradient-text {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: currentColor !important;
  background-clip: unset !important;
  color: #0A0A0A !important;
}

/* Kartlar: koyu → beyaz pane */
body.home-light .card {
  background: #fff !important;
  border: 1px solid #EAEAEC !important;
  border-radius: 18px !important;
  color: #0A0A0A;
  transition: border-color 0.15s, transform 0.15s;
}
body.home-light .card:hover {
  border-color: #D1D5DB !important;
  transform: translateY(-2px);
}

/* Butonlar */
body.home-light .btn-primary {
  background: #0A0A0A !important;
  color: #fff !important;
  padding: 12px 22px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: 14px;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.15s, background 0.15s;
  text-decoration: none;
}
body.home-light .btn-primary:hover {
  background: #1F1F21 !important;
  transform: translateY(-1px);
}
body.home-light .btn-secondary {
  background: transparent !important;
  color: #0A0A0A !important;
  border: 1px solid #D1D5DB !important;
  padding: 12px 22px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s, border-color 0.15s;
  text-decoration: none;
}
body.home-light .btn-secondary:hover {
  background: #F3F4F6 !important;
  border-color: #9CA3AF !important;
}

/* Nav linkleri — altı çizili olmasın, gri-siyah */
body.home-light .nav-link {
  color: #4B5563 !important;
  text-decoration: none !important;
  font-weight: 500;
  transition: color 0.15s;
}
body.home-light .nav-link:hover { color: #0A0A0A !important; }
body.home-light .nav-link.active { color: #0A0A0A !important; font-weight: 600; }

/* Tailwind text-white/XX override — light tema'da siyah tonları */
body.home-light [class*="text-white/40"],
body.home-light .text-white\/40 { color: #9CA3AF !important; }
body.home-light [class*="text-white/50"],
body.home-light .text-white\/50 { color: #9CA3AF !important; }
body.home-light [class*="text-white/60"],
body.home-light .text-white\/60 { color: #6B7280 !important; }
body.home-light [class*="text-white/70"],
body.home-light .text-white\/70 { color: #4B5563 !important; }
body.home-light [class*="text-white/75"],
body.home-light .text-white\/75 { color: #4B5563 !important; }
body.home-light [class*="text-white/80"],
body.home-light .text-white\/80 { color: #374151 !important; }
body.home-light .text-white { color: #0A0A0A !important; }

/* Border overrides (Tailwind arbitrary) */
body.home-light .border-white\/5,
body.home-light [class*="border-white/5"] { border-color: #EAEAEC !important; }
body.home-light .border-white\/10,
body.home-light [class*="border-white/10"] { border-color: #E5E7EB !important; }

/* Header — koyu blur → beyaz blur */
body.home-light header.border-b,
body.home-light header[class*="bg-[#0D0D0D]"],
body.home-light .bg-\[\#0D0D0D\],
body.home-light .bg-\[\#0D0D0D\]\/90 {
  background: rgba(247, 247, 248, 0.88) !important;
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: #EAEAEC !important;
}

/* bg-white/5, bg-white/10 — opak koyu katmanları açık gri yap */
body.home-light .bg-white\/5,
body.home-light [class*="bg-white/5"] { background: #F3F4F6 !important; }
body.home-light .bg-white\/10,
body.home-light [class*="bg-white/10"] { background: #EAEAEC !important; }

/* Amber/turuncu solid arka plan (bayimiz-olun'daki "İş Ortaklığı" chip + CTA) → siyah */
body.home-light .bg-\[\#F59E0B\] {
  background: #0A0A0A !important;
  color: #fff !important;
}
body.home-light .bg-\[\#F59E0B\] * { color: #fff !important; }
body.home-light .bg-\[\#F59E0B\]\/90,
body.home-light .hover\:bg-\[\#F59E0B\]\/90:hover {
  background: #1F1F21 !important;
  color: #fff !important;
}

/* Input/textarea koyu → beyaz */
body.home-light input,
body.home-light textarea,
body.home-light select {
  background: #fff !important;
  color: #0A0A0A !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 10px;
}
body.home-light input:focus,
body.home-light textarea:focus,
body.home-light select:focus {
  outline: none;
  border-color: #0A0A0A !important;
}

/* Hero / section — eski div chip'ler (bg-[#0057FF]/10 vb) sade düz pill olsun */
body.home-light [class*="bg-[#0057FF]/10"] {
  background: #F3F4F6 !important;
  border-color: #E5E7EB !important;
  color: #0A0A0A !important;
}
body.home-light [class*="bg-[#22C55E]/10"] {
  background: rgba(34,197,94,0.10) !important;
}
body.home-light [class*="bg-[#F59E0B]/10"] {
  background: rgba(245,158,11,0.10) !important;
}
body.home-light [class*="text-[#4A9EFF]"] { color: #2563EB !important; }
body.home-light [class*="text-[#22C55E]"] { color: #16A34A !important; }
body.home-light [class*="text-[#F59E0B]"] { color: #D97706 !important; }

/* Kod/monospace */
body.home-light code,
body.home-light pre { color: #111827; background: #F3F4F6; padding: 2px 6px; border-radius: 6px; }

/* Yasal / legal-content — dark → light çevirisi */
body.home-light .legal-content h2 {
  color: #0A0A0A !important;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
body.home-light .legal-content h3 {
  color: #0A0A0A !important;
  font-size: 1.15rem;
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}
body.home-light .legal-content p {
  color: #374151 !important;
  line-height: 1.7;
  margin-bottom: 1rem;
}
body.home-light .legal-content ul {
  color: #374151 !important;
  line-height: 1.7;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  list-style: disc !important;
}
body.home-light .legal-content li { margin-bottom: 0.5rem; }
body.home-light .legal-content strong { color: #0A0A0A !important; }
body.home-light .legal-content a { color: #2563EB !important; text-decoration: underline !important; }

/* Küçük "H" logo kutucuğu (gradient-bg kullanıyordu, artık siyah) */
body.home-light header .w-9.h-9 { border-radius: 10px !important; }

/* gradient-bg / btn-primary / btn-dark (hepsi siyah arka plan) içindeki
   ve kendisindeki text-white → BEYAZ kalsın (genel text-white kuralını override et) */
body.home-light .gradient-bg,
body.home-light .gradient-bg *,
body.home-light a.gradient-bg,
body.home-light .btn-primary,
body.home-light .btn-primary *,
body.home-light .btn-dark,
body.home-light .btn-dark * {
  color: #fff !important;
}

/* Fiyat kartındaki "Hemen Başla" anchor — tam genişlik + flex ortalı */
body.home-light a.gradient-bg.block,
body.home-light a.gradient-bg[class*="block"] {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  text-align: center;
  padding: 12px 22px;
  border-radius: 999px !important;
  font-weight: 600;
  transition: transform 0.2s, background 0.2s;
}
body.home-light a.gradient-bg.block:hover {
  background: #1F1F21 !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(10,10,10,0.35);
}

/* Dark CTA section içinde — header/footer gibi alanlarda beyaz metin */
body.home-light .dark-sec,
body.home-light .dark-sec p,
body.home-light .dark-sec .muted,
body.home-light .dark-sec .muted-2 { color: rgba(255,255,255,0.75); }
body.home-light .dark-sec h1,
body.home-light .dark-sec h2,
body.home-light .dark-sec h3,
body.home-light .dark-sec h4,
body.home-light .dark-sec .btn-light,
body.home-light .dark-sec .btn-ghost-light { color: #fff !important; }

/* Bayimiz-olun 4'lü kart grid (desktop 4, tablet 2, mobile 1) */
body.home-light .bayi-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 900px) { body.home-light .bayi-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { body.home-light .bayi-grid-4 { grid-template-columns: 1fr; } }

/* Footer border */
body.home-light footer.border-t { border-top: 1px solid #EAEAEC !important; }

/* Glow efektlerini kaldır (light tema uygun değil) */
body.home-light .glow { box-shadow: none !important; }

/* Hover efektleri — aktif renkli border override'ı */
body.home-light .card:hover { border-color: #0A0A0A !important; }

/* Kartlara sıralı giriş animasyonu */
@keyframes hatata-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.home-light .feat-grid-6 .tile { animation: hatata-fade-up 0.55s cubic-bezier(.22,1,.36,1) both; }
body.home-light .feat-grid-6 .tile:nth-child(1) { animation-delay: 0.05s; }
body.home-light .feat-grid-6 .tile:nth-child(2) { animation-delay: 0.12s; }
body.home-light .feat-grid-6 .tile:nth-child(3) { animation-delay: 0.19s; }
body.home-light .feat-grid-6 .tile:nth-child(4) { animation-delay: 0.26s; }
body.home-light .feat-grid-6 .tile:nth-child(5) { animation-delay: 0.33s; }
body.home-light .feat-grid-6 .tile:nth-child(6) { animation-delay: 0.40s; }
@media (prefers-reduced-motion: reduce) {
  body.home-light .feat-grid-6 .tile { animation: none; }
}

/* İcon renkleri biraz daha canlı (saturasyon artışı) */
body.home-light .ic-orange { color: #EA580C; }
body.home-light .ic-blue   { color: #1D4ED8; }
body.home-light .ic-green  { color: #15803D; }
body.home-light .ic-purple { color: #6D28D9; }
body.home-light .ic-amber  { color: #B45309; }
body.home-light .ic-indigo { color: #4338CA; }

/* Step number canlı hover */
body.home-light .step-num {
  transition: transform 0.28s cubic-bezier(.4,0,.2,1);
}
body.home-light .step-num:hover { transform: scale(1.12) rotate(-6deg); }