/* ============================================
   DİSKALKULİ BRAND THEME — platform rebranding
   Ana site renkleri: #0071dc (mavi) / #ffc221 (sarı) / #031f42 (navy)
   Override eder: Platform/css/style.css (dark/uzay tema)
   ============================================ */

:root {
  /* Ana site brand */
  --dk-blue:     #0071dc;
  --dk-blue-d:   #005bb3;
  --dk-blue-l:   #2b8bf0;
  --dk-yellow:   #ffc221;
  --dk-navy:     #031f42;
  --dk-navy-l:   #1a3a60;

  /* Light theme tokens — eski dark ones'u override et */
  --bg-primary:    #ffffff;
  --bg-secondary:  #f8f9fc;
  --bg-card:       #ffffff;
  --bg-elevated:   #f1f4f9;
  --bg-glass:      rgba(255, 255, 255, 0.85);

  --border:        rgba(3, 31, 66, 0.08);
  --border-strong: rgba(3, 31, 66, 0.15);
  --border-accent: rgba(0, 113, 220, 0.3);

  --text-primary:   var(--dk-navy);
  --text-secondary: #4a5568;
  --text-muted:     #7a8290;

  /* Accent rengi: platform morundan ana site mavisine */
  --accent-purple:      var(--dk-blue);
  --accent-purple-dark: var(--dk-blue-d);
  --accent-blue:        var(--dk-blue);
  --accent-blue-dark:   var(--dk-blue-d);
  --accent-teal:        var(--dk-blue);
  --accent-pink:        var(--dk-yellow);

  --shadow-sm:         0 2px 8px rgba(3, 31, 66, 0.06);
  --shadow-md:         0 8px 24px rgba(3, 31, 66, 0.08);
  --shadow-lg:         0 16px 48px rgba(3, 31, 66, 0.1);
  --shadow-glow-purple: 0 0 28px rgba(0, 113, 220, 0.22);
  --shadow-glow-teal:   0 0 24px rgba(13, 148, 136, 0.18);
  --shadow-glow-blue:   0 0 28px rgba(0, 113, 220, 0.22);

  --grad-galaxy: linear-gradient(135deg, #0071dc 0%, #2b8bf0 100%);
  --grad-numap:  linear-gradient(135deg, #005bb3 0%, #0071dc 50%, #2b8bf0 100%);
  --grad-hero:   radial-gradient(ellipse at top, rgba(0, 113, 220, 0.05) 0%, transparent 60%),
                 radial-gradient(ellipse at bottom right, rgba(255, 194, 33, 0.05) 0%, transparent 60%),
                 var(--bg-primary);
  --grad-text:   linear-gradient(135deg, #0071dc 0%, #2b8bf0 50%, #005bb3 100%);
}

/* ==================================================
   Arka plan + yıldızları KALDIR (uzay teması bitti)
   ================================================== */
body::before { display: none !important; }
body::after  { display: none !important; }
body {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* ==================================================
   Kart / Section backgrounds — light with subtle borders
   ================================================== */
.stat-card,
.feature-card,
.workflow-step,
.app-card,
.module-item,
.contact-card,
.profile-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}
.stat-card:hover,
.feature-card:hover,
.workflow-step:hover,
.contact-card:hover {
  border-color: var(--dk-blue) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-4px);
}

/* Section backgrounds: alternating white / soft gray */
section { background: var(--bg-primary); }
section:nth-of-type(even) { background: var(--bg-secondary); }

/* ==================================================
   Hero — beyaz arka plan, mavi vurgu
   ================================================== */
.hero {
  background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
  border-bottom: 1px solid var(--border);
}
.hero::before { display: none !important; }

.hero-badge {
  background: rgba(0, 113, 220, 0.08) !important;
  border-color: rgba(0, 113, 220, 0.25) !important;
  color: var(--dk-navy) !important;
}
.hero-badge .pulse {
  background: var(--dk-yellow) !important;
  box-shadow: 0 0 10px var(--dk-yellow) !important;
}

/* Eyebrow (küçük başlık) */
.section-eyebrow {
  background: rgba(0, 113, 220, 0.08) !important;
  color: var(--dk-blue) !important;
  border-color: rgba(0, 113, 220, 0.25) !important;
}

/* Başlık gradient */
.text-gradient {
  background: var(--grad-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ==================================================
   Buttons — ana site stilinde
   ================================================== */
.btn-primary {
  background: var(--dk-blue) !important;
  color: #ffffff !important;
  border-color: var(--dk-blue) !important;
  box-shadow: 0 4px 14px rgba(0, 113, 220, 0.25);
}
.btn-primary:hover {
  background: var(--dk-blue-d) !important;
  border-color: var(--dk-blue-d) !important;
  box-shadow: 0 8px 22px rgba(0, 113, 220, 0.35);
}

.btn-secondary {
  background: #ffffff !important;
  color: var(--dk-navy) !important;
  border: 1.5px solid var(--border-strong) !important;
}
.btn-secondary:hover {
  background: var(--bg-elevated) !important;
  border-color: var(--dk-blue) !important;
  color: var(--dk-blue) !important;
}

.btn-numap {
  background: var(--grad-numap) !important;
  color: #ffffff !important;
}

.btn-ghost {
  background: transparent !important;
  color: var(--text-secondary) !important;
  border: 1.5px solid var(--border) !important;
}
.btn-ghost:hover {
  color: var(--dk-blue) !important;
  border-color: var(--dk-blue) !important;
  background: rgba(0, 113, 220, 0.06) !important;
}

/* ==================================================
   App Cards (Numap, Galaksay)
   ================================================== */
.app-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
}
.app-card.numap-card .app-card-icon {
  background: var(--grad-numap) !important;
}
.app-card.galaksay-card .app-card-icon {
  background: linear-gradient(135deg, var(--dk-yellow), #ff9f1a) !important;
}
.app-card-tag {
  font-size: 0.72rem !important;
}
.app-card.numap-card .app-card-tag {
  background: rgba(0, 113, 220, 0.1) !important;
  color: var(--dk-blue) !important;
  border: 1px solid rgba(0, 113, 220, 0.25) !important;
}
.app-card.galaksay-card .app-card-tag {
  background: rgba(255, 194, 33, 0.12) !important;
  color: #b8860b !important;
  border: 1px solid rgba(255, 194, 33, 0.35) !important;
}
.app-card-features li {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
}

/* ==================================================
   Workflow steps
   ================================================== */
.workflow-number { box-shadow: 0 6px 16px rgba(0, 113, 220, 0.25) !important; }
.workflow-step.numap .workflow-number {
  background: var(--grad-numap) !important;
}
.workflow-step.galaksay .workflow-number {
  background: linear-gradient(135deg, var(--dk-yellow), #ff9f1a) !important;
}
.workflow-arrow { color: var(--dk-blue) !important; }

/* ==================================================
   Language switcher — beyaz arka plan
   ================================================== */
.lang-switcher {
  background: #ffffff !important;
  border: 1px solid var(--border-strong) !important;
}
.lang-btn {
  color: var(--text-muted) !important;
}
.lang-btn.active {
  background: var(--dk-blue) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* ==================================================
   Shop banner + CTA
   ================================================== */
.shop-banner {
  background: linear-gradient(135deg, rgba(0, 113, 220, 0.06), rgba(255, 194, 33, 0.04)) !important;
  border: 1px solid var(--border) !important;
}
.shop-banner-icon {
  background: linear-gradient(135deg, var(--dk-yellow), #ff9f1a) !important;
  box-shadow: 0 6px 18px rgba(255, 194, 33, 0.35) !important;
}

.cta {
  background:
    radial-gradient(circle at 20% 50%, rgba(0, 113, 220, 0.08), transparent 60%),
    radial-gradient(circle at 80% 50%, rgba(255, 194, 33, 0.08), transparent 60%),
    var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}
.cta h2, .cta .lead { color: var(--text-primary) !important; }

/* ==================================================
   Footer — sade ve uyumlu
   ================================================== */
.footer {
  background: var(--dk-navy) !important;
  border-top: 3px solid var(--dk-yellow);
  color: rgba(255, 255, 255, 0.82) !important;
}
.footer .footer-brand,
.footer h5 { color: #ffffff !important; }
.footer a { color: rgba(255, 255, 255, 0.72) !important; }
.footer a:hover { color: var(--dk-yellow) !important; }
.footer-about { color: rgba(255, 255, 255, 0.65) !important; }
.footer-bottom { border-top-color: rgba(255, 255, 255, 0.08) !important; }

/* ==================================================
   Profile avatar (hakkinda.html) — mavi gradient
   ================================================== */
.profile-avatar {
  background: var(--grad-numap) !important;
  box-shadow: 0 10px 30px rgba(0, 113, 220, 0.3) !important;
}
.profile-title { color: var(--dk-blue) !important; }

/* ==================================================
   Module items
   ================================================== */
.module-badge {
  background: rgba(0, 113, 220, 0.1) !important;
  color: var(--dk-blue) !important;
}
.module-item:hover {
  border-color: var(--dk-blue) !important;
  transform: translateX(4px);
}

/* ==================================================
   Feature icons — mavi-sarı
   ================================================== */
.feature-icon {
  background: rgba(0, 113, 220, 0.08) !important;
  border: 1px solid rgba(0, 113, 220, 0.2) !important;
  color: var(--dk-blue);
}

/* ==================================================
   Inline embed (iframe viewer)
   ================================================== */
.inline-embed {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
}
.inline-embed-toolbar {
  background: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border) !important;
}
.url-bar {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
}

/* ==================================================
   Nav-back buton (eski, artık görünmese de)
   ================================================== */
.nav-back {
  background: rgba(0, 113, 220, 0.08) !important;
  border-color: rgba(0, 113, 220, 0.25) !important;
  color: var(--dk-blue) !important;
}

/* ==================================================
   Contact cards
   ================================================== */
.contact-icon {
  background: var(--grad-numap) !important;
  box-shadow: 0 6px 18px rgba(0, 113, 220, 0.25) !important;
}
.contact-card a {
  color: var(--dk-blue) !important;
}
.contact-card a:hover {
  color: var(--dk-blue-d) !important;
}

/* ==================================================
   App-hero (detay sayfaları)
   ================================================== */
.app-hero {
  background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
  border-bottom: 1px solid var(--border);
}
.app-hero-preview {
  background: #f5f9ff !important;
  border: 1px solid var(--border) !important;
}
.app-hero-preview.numap-preview {
  background:
    radial-gradient(circle at 30% 40%, rgba(0, 113, 220, 0.12), transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(255, 194, 33, 0.08), transparent 60%),
    #f5f9ff !important;
}
.app-hero-preview.galaksay-preview {
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 194, 33, 0.15), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(0, 113, 220, 0.1), transparent 60%),
    #fffbf0 !important;
}

/* ==================================================
   Headings ve paragraflar
   ================================================== */
h1, h2, h3, h4, h5, h6 { color: var(--text-primary) !important; }
p { color: var(--text-secondary) !important; }
.lead { color: var(--text-secondary) !important; }

/* Utility overrides */
.text-purple { color: var(--dk-blue) !important; }
.text-blue   { color: var(--dk-blue) !important; }
.text-teal   { color: #0d9488 !important; }