/* ============================================================
   BAŞARI ATÖLYESİ — Brand styles
   Ported from the original coming-soon page's inline <style> block.
   ============================================================ */

:root {
  --c-primary: #29306D;
  --c-secondary: #604C9A;
  --c-accent: #F59D00;
}

html { scroll-behavior: smooth; }
body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }

/* ---------- Hero background: gradient + academic grid ---------- */
.hero-bg {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(96,76,154,.55), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(96,76,154,.4), transparent 60%),
    linear-gradient(160deg, #232a63 0%, #29306D 45%, #3a3480 100%);
}
.grid-pattern {
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black 40%, transparent 100%);
}

/* ---------- Glassmorphism (restrained) ---------- */
.glass {
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.14);
}

/* ---------- Entrance animations ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { opacity: 0; animation: fadeUp .8s cubic-bezier(.22,.8,.35,1) forwards; }
.d1 { animation-delay: .1s } .d2 { animation-delay: .25s } .d3 { animation-delay: .4s }
.d4 { animation-delay: .55s } .d5 { animation-delay: .7s }

/* Scroll-triggered reveal
   Fail-safe: elements are only hidden once JS has actually run and added
   "js-reveal-ready" to <html> (see assets/js/custom.js). Without this guard,
   if the reveal script fails to execute for any reason, every .reveal
   section stays permanently invisible (opacity:0) while still occupying
   its normal layout space — which reads as a broken, blank white gap
   between sections. Scoping the opacity:0 rule this way means "JS didn't
   run" degrades to "content is just visible", never to "content is stuck
   invisible".

   BUG FIXED HERE: "html.js-reveal-ready .reveal" has specificity (0,2,1)
   (1 type + 2 classes) — higher than plain ".reveal.in" at (0,2,0). That
   meant the hide rule always beat the show rule regardless of source
   order, so every .reveal.in element rendered at computed opacity:0 even
   though the "in" class was correctly applied by JS. The show rule below
   is scoped with the same "html.js-reveal-ready" prefix so its specificity
   is at least equal, plus !important so it can never silently regress the
   same way again if another rule is added later. */
html.js-reveal-ready .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.8,.35,1); }
html.js-reveal-ready .reveal.in { opacity: 1 !important; transform: translateY(0) !important; }

/* ---------- Floating shapes ---------- */
@keyframes floatY {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-18px) rotate(3deg); }
}
.float-slow { animation: floatY 9s ease-in-out infinite; }
.float-slower { animation: floatY 13s ease-in-out infinite; }

/* ---------- Buttons: ripple ---------- */
.btn { position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255,255,255,.45); transform: scale(0);
  animation: ripple .6s ease-out;
}
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* ---------- Cards ---------- */
.feature-card { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.feature-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -18px rgba(41,48,109,.28); border-color: rgba(96,76,154,.35); }
.contact-card { transition: transform .3s ease, box-shadow .3s ease; }
.contact-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px -16px rgba(41,48,109,.25); }

/* ---------- Social icons ---------- */
.social-link { transition: transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease; }
.social-link:hover { transform: translateY(-3px) scale(1.05); background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

/* ---------- Header navigation ---------- */
.ba-desktop-nav-menu a {
  display: inline-block;
  padding: 0.5rem 0;
  transition: color .2s ease;
}
.ba-desktop-nav-menu a:hover { color: var(--c-secondary); }

.ba-mobile-nav-menu li { list-style: none; }
.ba-mobile-nav-menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.625rem 0.5rem;
  font-weight: 600;
  color: var(--c-primary);
  border-bottom: 1px solid rgba(41,48,109,.08);
}
.ba-mobile-nav-menu li:last-child a { border-bottom: none; }
.ba-mobile-nav-menu a:hover { color: var(--c-secondary); }

/* ---------- Floating WhatsApp button ---------- */
.ba-whatsapp-float {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px -8px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ba-whatsapp-float:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 30px -8px rgba(0,0,0,.4); }

/* ---------- Cookie consent banner ---------- */
.ba-cookie-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 70;
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(41,48,109,.12);
  border-radius: 1.25rem;
  box-shadow: 0 20px 45px -18px rgba(41,48,109,.35);
  padding: 1.25rem;
}
.ba-cookie-banner[hidden] { display: none; }

/* ---------- Accessibility ---------- */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .fade-up, .reveal { opacity: 1 !important; transform: none !important; }
}
