/* ============================================================
   AiDesk tanıtım sitesi — marka tokenları ve temel stiller.
   Tailwind (Play CDN) renk utilityleri bu değişkenlere eşlenir
   (bkz. index.Master içindeki tailwind.config). Inline style ile
   kullanılan --gradient-brand / --shadow-* değerleri de burada.
   ============================================================ */

:root {
  --radius: 0.75rem;

  /* AiDesk marka */
  --brand-deep: #230d41;
  --brand-alt: #3d2280;
  --brand-accent: #7f2e8d;
  --brand-soft: #faf8fd;
  --brand-border: #e7e3ef;

  --background: #ffffff;
  --foreground: #1f2430;
  --card: #ffffff;
  --card-foreground: #1f2430;
  --popover: #ffffff;
  --popover-foreground: #1f2430;
  --primary: #7f2e8d;
  --primary-foreground: #ffffff;
  --secondary: #faf8fd;
  --secondary-foreground: #230d41;
  --muted: #faf8fd;
  --muted-foreground: #5b6170;
  --accent: #f3eaf6;
  --accent-foreground: #230d41;
  --destructive: #e5484d;
  --destructive-foreground: #ffffff;
  --border: #e7e3ef;
  --input: #e7e3ef;
  --ring: #7f2e8d;

  --gradient-brand: linear-gradient(120deg, #230d41, #3d2280 60%, #7f2e8d);
  --gradient-soft: linear-gradient(180deg, #ffffff, #faf8fd);
  --shadow-brand: 0 20px 60px -20px rgba(127, 46, 141, 0.45);
  --shadow-card: 0 8px 24px -12px rgba(35, 13, 65, 0.18);
}

.dark {
  /* AiDesk koyu tema — client.aidesk.com.tr giriş zeminine yakın */
  --background: #1a0a35;
  --foreground: #f3ecf8;
  --card: #261247;
  --card-foreground: #f3ecf8;
  --popover: #261247;
  --popover-foreground: #f3ecf8;
  --primary: #b558c9;
  --primary-foreground: #ffffff;
  --secondary: #2e1654;
  --secondary-foreground: #f3ecf8;
  --muted: #2e1654;
  --muted-foreground: #b9a8d1;
  --accent: #3d2280;
  --accent-foreground: #f3ecf8;
  --destructive: #ff6166;
  --destructive-foreground: #ffffff;
  --border: rgba(255, 255, 255, 0.10);
  --input: rgba(255, 255, 255, 0.14);
  --ring: #b558c9;
  --gradient-brand: linear-gradient(120deg, #3d2280, #7f2e8d 60%, #b558c9);
  --gradient-soft: linear-gradient(180deg, #1a0a35, #261247);
  --shadow-brand: 0 20px 60px -20px rgba(181, 88, 201, 0.55);
  --shadow-card: 0 8px 24px -12px rgba(0, 0, 0, 0.55);
}

* {
  border-color: var(--border);
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.dark body {
  background-color: #1a0a35;
  background-image:
    radial-gradient(60% 50% at 15% 10%, rgba(127, 46, 141, 0.45), transparent 70%),
    radial-gradient(50% 40% at 85% 90%, rgba(61, 34, 128, 0.55), transparent 70%);
  background-attachment: fixed;
}

h1, h2, h3, h4 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  letter-spacing: -0.02em;
}

/* Sticky header altında kalmasın diye anchor hedef boşluğu */
[id] {
  scroll-margin-top: 5rem;
}

/* ---- Sticky header (yarı saydam + blur) ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--background) 82%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

/* ---- Yumuşak zeminli bölümler ---- */
.section-soft {
  background: color-mix(in srgb, var(--secondary) 60%, var(--background));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ---- Marka degrade metin ---- */
.text-gradient-brand {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---- Logo (UI projesindeki PNG'ler) ----
   aidesk-logo-light.png : beyaz zeminli, mor logo  -> açık tema
   aidesk-logo.png       : #230d41 zeminli, beyaz logo -> koyu tema + footer */
.site-logo { height: 34px; width: auto; display: block; }
.footer-logo { height: 42px; width: auto; display: block; }
.logo-on-dark { display: none; }
.dark .logo-on-dark { display: block; }
.dark .logo-on-light { display: none; }

/* ---- Entegre LLM logoları (beyaz tile = her iki temada net) ---- */
.llm-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: #ffffff;
  border: 1px solid #e7e3ef;
  border-radius: 1rem;
  padding: 1.35rem 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.llm-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px -14px rgba(35, 13, 65, 0.30);
}
.llm-logo {
  height: 34px;
  width: auto;
  display: block;
}
.llm-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: #3a3340;
  letter-spacing: -0.01em;
}

/* ---- Hero görselinde dağınık yüzen LLM rozetleri ---- */
.llm-float {
  position: absolute;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.34rem 0.7rem 0.34rem 0.42rem;
  border-radius: 9999px;
  background: #ffffff;
  border: solid 1px #7f2e8d;
  box-shadow: 0 10px 26px -8px rgba(35, 13, 65, 0.40);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  color: #2a2433;
  white-space: nowrap;
}
.llm-float img {
  width: 18px;
  height: 18px;
  display: block;
  flex: none;
}
/* Her rozet kendi yörüngesinde sürüklensin — tek tip "çerçeve boyunca" hareket yok */
@keyframes llmDriftA { 0%,100% { transform: translate(0,0) rotate(-2deg); } 50% { transform: translate(7px,-13px) rotate(2deg); } }
@keyframes llmDriftB { 0%,100% { transform: translate(0,0) rotate(2deg); } 50% { transform: translate(-10px,-7px) rotate(-3deg); } }
@keyframes llmDriftC { 0%,100% { transform: translate(0,0); } 33% { transform: translate(8px,6px) rotate(3deg); } 66% { transform: translate(-6px,-9px) rotate(-2deg); } }
@keyframes llmDriftD { 0%,100% { transform: translate(0,0) rotate(1deg); } 50% { transform: translate(-8px,11px) rotate(-3deg); } }
.llm-float.f1 { animation: llmDriftA 6s   ease-in-out infinite; }
.llm-float.f2 { animation: llmDriftB 7.5s ease-in-out infinite; }
.llm-float.f3 { animation: llmDriftC 9s   ease-in-out infinite; }
.llm-float.f4 { animation: llmDriftD 6.8s ease-in-out infinite; }
.llm-float.f5 { animation: llmDriftA 8.2s ease-in-out infinite reverse; }
.llm-float.f6 { animation: llmDriftB 6.4s ease-in-out infinite reverse; }
.llm-float.f7 { animation: llmDriftC 9.6s ease-in-out infinite reverse; }
.llm-float.f8 { animation: llmDriftD 7.7s ease-in-out infinite reverse; }
@media (prefers-reduced-motion: reduce) {
  .llm-float { animation: none !important; }
}

/* ---- Kayan güven şeridi (marquee) ---- */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 32s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-right: 2.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--foreground);
  white-space: nowrap;
}
.marquee-item i,
.marquee-item svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--primary);
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ---- Tema değiştirme ikonları (ay/güneş) ---- */
.theme-icon-dark { display: none; }
.dark .theme-icon-dark { display: inline-block; }
.dark .theme-icon-light { display: none; }

/* ---- Form alanları (odak halkası garanti) ---- */
.aid-input {
  width: 100%;
  margin-top: 0.375rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.aid-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}
.aid-input::placeholder { color: var(--muted-foreground); }
textarea.aid-input { resize: vertical; min-height: 120px; }

/* ---- SSS accordion ---- */
details.faq[open] {
  box-shadow: var(--shadow-card);
}
details.faq > summary { list-style: none; }
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary .faq-plus { transition: transform 0.2s; }
details.faq[open] > summary .faq-plus { transform: rotate(45deg); }

/* ---- Görünüme girince yukarı kayma animasyonu ---- */
.fade-up {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Form başarı kutusu */
.form-success {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: color-mix(in srgb, var(--primary) 10%, var(--background));
  border: 1px solid var(--primary);
  color: var(--foreground);
  border-radius: 0.75rem;
  padding: 0.85rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
}

/* ============================================================
   ÜST BANT (.site-topbar)
   Marka sahipliğini (AiDesk by Dimnida) ve doğrudan iletişim
   kanallarını taşır. Sticky DEĞİLDİR: yukarı kaydırınca akıp
   gider, .site-header top:0'da yapışık kalır — böylece bölüm
   çapalarındaki scroll-margin-top: 5rem değeri geçerli kalır.
   ============================================================ */
.site-topbar {
  background: var(--brand-deep);
  color: rgba(255, 255, 255, .82);
  font-size: 12.5px;
  line-height: 1;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.site-topbar > div { min-height: 38px; }

.topbar-brand {
  font-weight: 600;
  letter-spacing: .2px;
  color: #ffffff;
  white-space: nowrap;
}
.topbar-brand em {
  font-style: normal;
  font-weight: 400;
  color: rgba(255, 255, 255, .55);
  margin: 0 2px;
}

.topbar-links {
  display: flex;
  align-items: center;
  gap: 6px;
}

.topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border-radius: 999px;
  color: rgba(255, 255, 255, .82);
  transition: background .18s ease, color .18s ease;
}
.topbar-link svg { width: 16px; height: 16px; flex: none; }
.topbar-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, .12);
}

.topbar-wa {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  font-weight: 600;
  color: #ffffff;
  background: #25d366;
  transition: filter .18s ease, transform .18s ease;
}
.topbar-wa svg { width: 15px; height: 15px; flex: none; }
.topbar-wa:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Dar ekranda yazılar düşer, ikonlar kalır */
@media (max-width: 640px) {
  .site-topbar { font-size: 12px; }
  .topbar-mail .topbar-label { display: none; }
  .topbar-wa { padding: 6px 10px; }
  .topbar-wa .topbar-label { display: none; }
}
@media (max-width: 380px) {
  .topbar-brand em { display: none; }
}

/* Footer — marka sahipliği ibaresi (WhatsApp / Meta marka doğrulaması) */
.footer-brand-note {
  color: rgba(255, 255, 255, .8);
  font-weight: 600;
}