/* ==========================================================================
   DESIGN FUTURES — Design System Tokens & Global Stylesheet (2026)
   Independent Digital Architecture, Web3 & Digital Product Design Studio
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   -------------------------------------------------------------------------- */
:root {
  /* --- Brand Core Colors --- */
  --brand-blue: #2596ff;
  --brand-blue-glow: rgba(37, 150, 255, 0.45);
  --brand-blue-subtle: rgba(37, 150, 255, 0.12);
  
  --brand-purple: #762de9;
  --brand-purple-glow: rgba(118, 45, 233, 0.45);
  --brand-purple-subtle: rgba(118, 45, 233, 0.12);
  
  /* --- Brand Gradients --- */
  --brand-gradient: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-purple) 100%);
  --brand-gradient-hover: linear-gradient(135deg, #3fa5ff 0%, #8b40fb 100%);
  --brand-gradient-h: linear-gradient(to right, var(--brand-blue) 0%, var(--brand-purple) 100%);
  --brand-gradient-contour: linear-gradient(to right, #2596ff, #762de9);

  /* --- Canvas & Surfaces --- */
  --canvas-light: #f6f8fb;
  --canvas-obsidian: #08070e;
  --canvas-showcase: #070710;
  --canvas-stage: radial-gradient(ellipse at 80% 55%, #181135 0%, #0d1428 38%, #08070e 72%);
  --canvas-footer: radial-gradient(ellipse at 75% 25%, #181135 0%, #0d1428 42%, #08070e 82%);

  /* --- Glassmorphism System (Light Atelier) --- */
  --glass-panel-bg: rgba(255, 255, 255, 0.72);
  --glass-panel-border: rgba(255, 255, 255, 0.88);
  --glass-panel-blur: 24px;
  --glass-panel-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
  --glass-panel-shadow-hover: 0 20px 45px -12px rgba(15, 23, 42, 0.09);

  --glass-subtle-bg: rgba(255, 255, 255, 0.52);
  --glass-subtle-border: rgba(255, 255, 255, 0.75);
  --glass-subtle-blur: 18px;
  --glass-subtle-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.03);

  --glass-pill-bg: rgba(255, 255, 255, 0.68);
  --glass-pill-border: rgba(255, 255, 255, 0.9);
  --glass-pill-blur: 16px;
  --glass-pill-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.03);

  /* --- Frosted Glass Header Tokens (Blurlu Cam Sistemi) ---
     Kept deliberately low-opacity with a single soft edge: a thick
     border + double white ring (old values) reads as an opaque white
     box, not glass. Real glass is mostly the blur/saturate doing the
     work, with just a hairline edge and one soft shadow. */
  --header-glass-bg: rgba(255, 255, 255, 0.22);
  --header-glass-border: rgba(255, 255, 255, 0.28);
  --header-glass-blur: 8px;
  --header-glass-saturate: 190%;
  --header-glass-shadow: 0 8px 28px -10px rgba(0, 0, 0, 0.22), inset 0 1px 0 0 rgba(255, 255, 255, 0.45);

  /* --- Dual-Tone Dark Cyber Showcase Tokens --- */
  --dark-panel-bg: rgba(13, 16, 30, 0.85);
  --dark-panel-border: rgba(255, 255, 255, 0.09);
  --dark-panel-border-hover: rgba(37, 150, 255, 0.5);
  --dark-panel-blur: 26px;
  --dark-panel-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.7);
  --dark-panel-shadow-hover: 0 24px 50px -10px rgba(0, 0, 0, 0.85), 0 0 35px -5px rgba(37, 150, 255, 0.28), 0 0 0 1px rgba(118, 45, 233, 0.35);

  --dark-filter-bg: rgba(255, 255, 255, 0.07);
  --dark-filter-bg-hover: rgba(255, 255, 255, 0.16);
  --dark-filter-border: rgba(255, 255, 255, 0.12);
  --dark-filter-border-hover: rgba(37, 150, 255, 0.4);
  --dark-filter-text: #cbd5e1;

  /* --- Sticky Header Scrolled State ---
     Only elevation (shadow) changes on scroll. The glass material itself
     (tint/blur/saturate) stays IDENTICAL to the normal header state — a
     different tint or blur here reads as a different material switching
     in, not the same glass reacting to scroll. */
  --header-scrolled-bg: var(--header-glass-bg);
  --header-scrolled-border: var(--header-glass-border);
  --header-scrolled-blur: var(--header-glass-blur);
  --header-scrolled-shadow: 0 10px 32px -12px rgba(15, 23, 42, 0.18), inset 0 1px 0 0 rgba(255, 255, 255, 0.55);

  /* --- 3D Hero Motion Runway Internal Tokens --- */
  --motion-ink: #08070e;
  --motion-paper: #f5f1ff;
  --motion-muted: #99a2b8;
  --motion-track-bg: rgba(255, 255, 255, 0.08);

  /* --- Typography Families --- */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Manrope', 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'Plus Jakarta Sans', 'Inter', monospace;

  /* --- Site-Wide Content Width ---
     Single source of truth for every page's outer container (header, main,
     footer, and every full-bleed section in between). Change this once and
     every page/section follows — never hardcode a max-w-[...]px value for a
     top-level container again; use the `.container-max` class below instead.
     (This value matches every "temel sayfa" — index/services/portfolio/
     about/contact — and every detail-page template now uses it too.) */
  --container-max: 1760px;
}

/* --------------------------------------------------------------------------
   1A2. SITE-WIDE CONTAINER
   Replaces every `max-w-[1760px] mx-auto` (or any other hardcoded pixel
   value used as a page's outer container) across every page and section.
   Usage: class="container-max w-full px-6 sm:px-10 lg:px-16 2xl:px-20 ..."
   -------------------------------------------------------------------------- */
.container-max {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   1B. GLOBAL SCROLL BEHAVIOR
   Smooth in-page scrolling for hash links (e.g. contact.html's
   #briefing-form) and any scrollIntoView()/scrollTo() call that doesn't
   already specify its own `behavior`. This only affects scrolls triggered by
   navigation/script, never raw wheel/trackpad input, so it doesn't touch the
   3D hero's own scroll-driven camera sync on index.html (that reads
   window.scrollY passively and does its own rAF/lerp smoothing regardless).
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* --------------------------------------------------------------------------
   1C. BASE TYPOGRAPHY — ONE FONT PER ROLE, EVERYWHERE
   Only two typefaces exist in this system: Clash Display (headings/sub-
   headings) and Plus Jakarta Sans (body text). These base tag rules make
   that the DEFAULT for every heading and every block of text, so nothing
   ever silently falls back to the browser's generic serif/system font just
   because a specific element forgot a font-* class. Anything that
   deliberately needs the small-label mono treatment still gets it: a
   Tailwind class like `.font-mono` is more specific than a bare tag
   selector, so it always wins over these defaults.
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-sans);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

/* --------------------------------------------------------------------------
   2. BRAND GRADIENT UTILITIES
   -------------------------------------------------------------------------- */
.bg-brand-gradient {
  background: var(--brand-gradient);
}

.text-brand-gradient {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.border-brand-gradient {
  border-image: var(--brand-gradient) 1;
}

.footer-canvas-gradient {
  background: var(--canvas-footer);
}

/* --------------------------------------------------------------------------
   3. GLASSMORPHISM SYSTEM (LIGHT ATELIER)
   -------------------------------------------------------------------------- */
.glass-panel {
  background: var(--glass-panel-bg);
  backdrop-filter: blur(var(--glass-panel-blur));
  -webkit-backdrop-filter: blur(var(--glass-panel-blur));
  border: 1px solid var(--glass-panel-border);
  box-shadow: var(--glass-panel-shadow);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.glass-panel:hover {
  box-shadow: var(--glass-panel-shadow-hover);
}

.glass-panel-subtle {
  background: var(--glass-subtle-bg);
  backdrop-filter: blur(var(--glass-subtle-blur));
  -webkit-backdrop-filter: blur(var(--glass-subtle-blur));
  border: 1px solid var(--glass-subtle-border);
  box-shadow: var(--glass-subtle-shadow);
  transition: border-color 0.25s ease, background 0.25s ease;
}

.glass-pill {
  background: var(--glass-pill-bg);
  backdrop-filter: blur(var(--glass-pill-blur));
  -webkit-backdrop-filter: blur(var(--glass-pill-blur));
  border: 1px solid var(--glass-pill-border);
  box-shadow: var(--glass-pill-shadow);
  transition: all 0.25s ease;
}

.glow-accent {
  box-shadow: 0 0 35px -5px var(--brand-blue-glow);
}

/* --------------------------------------------------------------------------
   4. DUAL-TONE CYBER SHOWCASE SYSTEM (ZONE 2)
   -------------------------------------------------------------------------- */
.dark-showcase-panel {
  background: var(--dark-panel-bg);
  backdrop-filter: blur(var(--dark-panel-blur));
  -webkit-backdrop-filter: blur(var(--dark-panel-blur));
  border: 1px solid var(--dark-panel-border);
  box-shadow: var(--dark-panel-shadow);
  transition: border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Stable card interaction: zero translateY or jumping on hover */
.dark-showcase-panel:hover {
  border-color: var(--dark-panel-border-hover);
  box-shadow: var(--dark-panel-shadow-hover);
}

.dark-filter-btn {
  background: var(--dark-filter-bg);
  border: 1px solid var(--dark-filter-border);
  color: var(--dark-filter-text);
  transition: all 0.25s ease;
}

.dark-filter-btn:hover {
  background: var(--dark-filter-bg-hover);
  color: #ffffff;
  border-color: var(--dark-filter-border-hover);
}

.dark-filter-btn.active-filter {
  background: var(--brand-gradient) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 0 22px var(--brand-blue-glow) !important;
}

/* --------------------------------------------------------------------------
   5. INTERACTIVE COMPONENTS & MICRO-ANIMATIONS
   -------------------------------------------------------------------------- */
/* Infinite Marquee Animation */
@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee-wrapper {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 26s linear infinite;
}

.marquee-wrapper:hover .marquee-track {
  animation-play-state: paused;
}

/* Reverse-direction / speed variants for stacked multi-row marquee bands */
@keyframes marqueeScrollReverse {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.marquee-track-reverse {
  animation-name: marqueeScrollReverse;
}

.marquee-track-slow {
  animation-duration: 46s;
}

.marquee-track-fast {
  animation-duration: 20s;
}

/* Hollow / outlined poster-style text used for alternating marquee words */
.marquee-text-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.92);
}

/* Project Cards Category Transition */
.project-card {
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card.is-hidden {
  display: none;
  opacity: 0;
  transform: scale(0.96);
}

/* Sound / Telemetry Waveform Animation */
@keyframes waveBar {
  0%, 100% { height: 6px; }
  50% { height: 26px; }
}

.wave-bar-1 { animation: waveBar 1.2s ease-in-out infinite; }
.wave-bar-2 { animation: waveBar 0.9s ease-in-out infinite 0.2s; }
.wave-bar-3 { animation: waveBar 1.4s ease-in-out infinite 0.4s; }
.wave-bar-4 { animation: waveBar 0.8s ease-in-out infinite 0.1s; }
.wave-bar-5 { animation: waveBar 1.1s ease-in-out infinite 0.3s; }

/* Liquid Glass Sticky Header (#site-header)
   Real lensing technique (not just blur+tint): a dedicated .glass-filter
   layer gets backdrop-filter blur AND an SVG displacement filter
   (#headerLensFilter) that bends whatever is behind it near the shape's
   edges, like actual glass refraction. .glass-overlay is the flat colour
   tint, .glass-specular is the crisp inset rim-light. The header's real
   content (logo/nav/actions) sits above all three via z-index. There is
   intentionally no `border` anywhere in this stack. */
#site-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: var(--header-glass-shadow) !important;
  transition: box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), padding 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

#site-header .glass-filter,
#site-header .glass-overlay,
#site-header .glass-specular {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

#site-header .glass-filter {
  z-index: 0;
  /* The lens filter is chained INSIDE backdrop-filter (not a separate
     `filter` property) — this is the syntax real Liquid Glass
     implementations use, and it's what actually lets the displacement
     warp the sampled backdrop instead of the (transparent) element itself. */
  backdrop-filter: blur(var(--header-glass-blur)) url(#headerLensFilter) saturate(var(--header-glass-saturate));
  -webkit-backdrop-filter: blur(var(--header-glass-blur)) saturate(var(--header-glass-saturate));
}

#site-header .glass-overlay {
  z-index: 1;
  background: var(--header-glass-bg);
  transition: background 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

#site-header .glass-specular {
  z-index: 2;
  /* Multi-layer inset "reflex": several thin light/dark catches from
     different edges instead of one flat highlight — reads as an actual
     curved, faceted glass edge with thickness rather than a flat tint. */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    inset 1.5px 2px 0 -1px rgba(255, 255, 255, 0.85),
    inset -1.5px -1.5px 0 -1px rgba(255, 255, 255, 0.55),
    inset -2px -6px 3px -5px rgba(255, 255, 255, 0.5),
    inset -1px 2px 3px -1px rgba(15, 23, 42, 0.12),
    inset 0 -3px 2px -2px rgba(15, 23, 42, 0.08);
}

#site-header > *:not(.glass-filter):not(.glass-overlay):not(.glass-specular) {
  position: relative;
  z-index: 3;
}

/* "Let's Talk" as its own glass island sitting on top of the header's glass
   — same lens filter as the header (#headerLensFilter, already defined once
   per page), just a darker tint so white label text stays legible. Mirrors
   the separated glass app-icon floating beside the main iOS Dock. */
.header-glass-btn {
  position: relative;
  overflow: hidden;
  /* Same light glass as .nav-liquid-pill (the menu hover pill) — no dark
     tint. Text switches to dark to stay legible on this light glass. */
  background: rgba(255, 255, 255, 0.16);
  color: #1e293b;
  backdrop-filter: blur(6px) url(#headerLensFilter) saturate(180%);
  -webkit-backdrop-filter: blur(6px) saturate(180%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.3),
    inset 1.2px 1.5px 0 -0.5px rgba(255, 255, 255, 0.85),
    inset -1.2px -1.2px 0 -0.5px rgba(255, 255, 255, 0.5),
    0 4px 14px -6px rgba(15, 23, 42, 0.3);
  transition: background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.header-glass-btn:hover {
  background: linear-gradient(135deg, rgba(37, 150, 255, 0.85), rgba(118, 45, 233, 0.85));
  color: #ffffff;
}

#site-header.is-scrolled {
  box-shadow: var(--header-scrolled-shadow) !important;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

#site-header.is-scrolled .glass-overlay {
  background: var(--header-scrolled-bg);
}

#site-header.is-scrolled .glass-filter {
  backdrop-filter: blur(var(--header-scrolled-blur)) url(#headerLensFilter) saturate(var(--header-glass-saturate));
  -webkit-backdrop-filter: blur(var(--header-scrolled-blur)) saturate(var(--header-glass-saturate));
}

/* --------------------------------------------------------------------------
   FLOATING WHATSAPP FAB + WIDGET — exact same Liquid Glass recipe as
   #site-header (same --header-glass-* variables, same lens filter, same
   3-layer glass-filter/glass-overlay/glass-specular stack), so the floating
   button and its expandable panel read as the same physical glass material
   as the header, not a different effect.
   -------------------------------------------------------------------------- */
.wa-fab,
.wa-widget {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.wa-fab .glass-filter,
.wa-fab .glass-overlay,
.wa-fab .glass-specular,
.wa-widget .glass-filter,
.wa-widget .glass-overlay,
.wa-widget .glass-specular {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.wa-fab .glass-filter,
.wa-widget .glass-filter {
  z-index: 0;
  backdrop-filter: blur(var(--header-glass-blur)) url(#headerLensFilter) saturate(var(--header-glass-saturate));
  -webkit-backdrop-filter: blur(var(--header-glass-blur)) saturate(var(--header-glass-saturate));
}

.wa-fab .glass-overlay,
.wa-widget .glass-overlay {
  z-index: 1;
  background: var(--header-glass-bg);
}

.wa-fab .glass-specular,
.wa-widget .glass-specular {
  z-index: 2;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    inset 1.5px 2px 0 -1px rgba(255, 255, 255, 0.85),
    inset -1.5px -1.5px 0 -1px rgba(255, 255, 255, 0.55),
    inset -2px -6px 3px -5px rgba(255, 255, 255, 0.5),
    inset -1px 2px 3px -1px rgba(15, 23, 42, 0.12),
    inset 0 -3px 2px -2px rgba(15, 23, 42, 0.08);
}

.wa-fab > *:not(.glass-filter):not(.glass-overlay):not(.glass-specular),
.wa-widget > *:not(.glass-filter):not(.glass-overlay):not(.glass-specular) {
  position: relative;
  z-index: 3;
}

.wa-fab {
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  box-shadow: var(--header-glass-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.wa-fab:hover {
  transform: scale(1.06);
}

.wa-widget {
  border-radius: 24px;
  box-shadow: var(--header-glass-shadow);
  transform-origin: bottom right;
}

/* --------------------------------------------------------------------------
   LIQUID GLASS NAV — morphing pill indicator between menu items
   -------------------------------------------------------------------------- */
.nav-links {
  position: relative;
}

.nav-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.95rem;
  border-radius: 9999px;
  /* Normal (unscrolled) header: white, since this state sits over the dark
     hero. The active/hovered link stays dark because it sits on top of the
     light .nav-liquid-pill regardless of what's behind the header. */
  color: #ffffff;
  transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link[data-active="true"] {
  color: #0f172a;
}

/* Scrolled header sits over light content — flip inactive links back to dark. */
#site-header.is-scrolled .nav-link {
  color: #1e293b;
}

#site-header.is-scrolled .nav-link:hover,
#site-header.is-scrolled .nav-link[data-active="true"] {
  color: #0f172a;
}

/* Inner pages (about/services/portfolio/contact/hizmet-detay) have a light
   hero, not the dark 3D hero index.html has — so the header starts dark-text
   here even before scrolling. Only index.html keeps the white default. */
#site-header.light-page .nav-link {
  color: #1e293b;
}

#site-header.light-page .nav-link:hover,
#site-header.light-page .nav-link[data-active="true"] {
  color: #0f172a;
}

/* Liquid pill: a single glass capsule that both slides (translateX/width,
   JS-driven since nav items have unequal widths) and "stretches" toward the
   direction of travel using the separate CSS `scale` property + a directional
   transform-origin — the same technique Apple's own Control Center segmented
   switcher uses (scale animates independently of transform, so it layers
   cleanly on top of the slide instead of fighting it). */
.nav-liquid-pill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 9999px;
  /* Deliberately near-transparent: this is not a white shape, it's a lens.
     backdrop-filter samples the header behind it; the SVG displacement
     filter then bulges/bends that sample near the pill's edges, so it
     reads as an actual droplet of glass gliding past, not a solid pill. */
  background: rgba(255, 255, 255, 0.12);
  /* Lens chained inside backdrop-filter (see .glass-filter above) — same
     reasoning: it needs to warp the sampled backdrop, not the pill itself. */
  backdrop-filter: blur(3px) url(#navPillLensFilter) saturate(180%) brightness(1.15);
  -webkit-backdrop-filter: blur(3px) saturate(180%) brightness(1.15);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.3),
    inset 1.2px 1.5px 0 -0.5px rgba(255, 255, 255, 0.85),
    inset -1.2px -1.2px 0 -0.5px rgba(255, 255, 255, 0.5),
    inset -1px 2px 2px -1px rgba(15, 23, 42, 0.12),
    0 4px 12px -6px rgba(15, 23, 42, 0.35);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), width 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, width, scale;
  pointer-events: none;
  z-index: 0;
}

.nav-liquid-pill.is-stretching-right {
  transform-origin: left center;
  animation: navPillStretch 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-liquid-pill.is-stretching-left {
  transform-origin: right center;
  animation: navPillStretch 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes navPillStretch {
  0% { scale: 1 1; }
  35% { scale: 1.08 0.97; }
  100% { scale: 1 1; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-liquid-pill {
    transition: none;
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   6. 3D INTERACTIVE HERO MOTION RUNWAY (#impula-motion)
   -------------------------------------------------------------------------- */
#impula-motion {
  --ink: var(--motion-ink);
  --paper: var(--motion-paper);
  --blue: var(--brand-blue);
  --purple: var(--brand-purple);
  --gradient-brand: var(--brand-gradient-h);
  --muted: var(--motion-muted);
  color: var(--paper);
  background: var(--ink);
  font-family: var(--font-sans);
  position: relative;
  isolation: isolate;
}

#impula-motion * {
  box-sizing: border-box;
}

#impula-motion button,
#impula-motion a {
  -webkit-tap-highlight-color: transparent;
}

#impula-motion button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

#impula-motion a {
  color: inherit;
  text-decoration: none;
}

#impula-motion button:focus-visible,
#impula-motion a:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 6px;
}

#impula-motion .motion-runway {
  height: 440vh;
  position: relative;
}

#impula-motion .motion-stage {
  height: 100svh;
  min-height: 640px;
  position: sticky;
  top: 0;
  overflow: hidden;
  background: var(--canvas-stage);
  perspective: 1200px;
}

#impula-motion .grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 12;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}

#impula-motion .light-field {
  position: absolute;
  width: 70vw;
  height: 70vw;
  top: 5%;
  left: 40%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(37,150,255,0.14) 0%, rgba(118,45,233,0.18) 42%, transparent 68%);
  animation: breathe 7s ease-in-out infinite alternate;
}

#impula-motion .giant-word {
  position: absolute;
  left: 24%;
  top: 38%;
  font-size: clamp(160px, 24vw, 420px);
  line-height: .85;
  font-weight: 900;
  font-family: var(--font-display);
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(37,150,255,0.08);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

#impula-motion .animal-wrap {
  position: absolute;
  width: 55vw;
  left: 49%;
  height: 86%;
  top: 11%;
  z-index: 5;
  transform-origin: 50% 55%;
  will-change: transform;
  pointer-events: none;
  transform-style: preserve-3d;
}

#impula-motion model-viewer::part(default-progress-bar),
#impula-motion model-viewer::part(default-progress-mask),
#impula-motion model-viewer [slot="progress-bar"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#impula-motion model-viewer.animal {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  --poster-color: transparent;
  /* No filter on this element — do not add drop-shadow()/animation here.
     Tried an "only while scroll is idle" version; the canvas apparently
     never fully goes idle, so it stayed expensive and caused jank even at
     rest on real laptops. Confirmed on real hardware: filter:none is the
     only version that scrolls smoothly. Leave it off. */
}

#impula-motion .story {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

#impula-motion .scene {
  position: absolute;
  left: 7%;
  top: 22%;
  width: 49%;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  max-height: calc(100% - 180px);
}

#impula-motion .scene.active {
  opacity: 1;
  pointer-events: auto;
}

#impula-motion .eyebrow {
  font-size: 11px;
  letter-spacing: 2.2px;
  color: #7eaeff;
  margin: 0 0 24px;
  font-weight: 700;
}

#impula-motion h1,
#impula-motion h2 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 88px);
  line-height: .96;
  letter-spacing: -.03em;
  font-weight: 800;
  margin: 0 0 22px;
}

#impula-motion .outline {
  color: transparent;
  -webkit-text-stroke: 1px rgba(110, 183, 255, 0.65);
}

#impula-motion em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.09;
  background: var(--brand-gradient-h);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

#impula-motion .scene-description {
  font-size: 15px;
  line-height: 1.7;
  color: #a8b4cc;
  margin: 0 0 26px;
}

#impula-motion .circle-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  background: none;
  border: 0;
  padding: 0;
  font-size: 11px;
  letter-spacing: 1.5px;
  font-weight: 700;
  cursor: pointer;
}

#impula-motion .circle-link b {
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(37,150,255,0.6);
  box-shadow: 0 0 14px rgba(37,150,255,0.25);
  width: 42px;
  height: 42px;
  font-size: 20px;
  font-weight: 400;
  transition: all .25s ease;
}

#impula-motion .circle-link:hover b {
  background: var(--brand-gradient);
  border-color: transparent;
  box-shadow: 0 0 24px var(--brand-purple-glow);
  color: #fff;
  transform: translateY(2px);
}

#impula-motion .scene-two {
  left: 55%;
  width: 42%;
  top: 23%;
}

#impula-motion .scene-two h2 {
  font-size: clamp(38px, 4.6vw, 80px);
}

#impula-motion .tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 420px;
}

#impula-motion .tags span {
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  padding: 8px 16px;
  transition: all .25s;
  color: #d1dcfa;
  background: rgba(255, 255, 255, 0.03);
  display: inline-block;
}

#impula-motion .tags span:hover {
  border-color: rgba(37, 150, 255, 0.6);
  background: var(--brand-blue-subtle);
  box-shadow: 0 0 15px rgba(37, 150, 255, 0.25);
  color: #fff;
}

#impula-motion .scene-three {
  top: 21%;
}

#impula-motion .scene-three h2 {
  font-size: clamp(40px, 4.8vw, 84px);
}

#impula-motion .service-lines {
  max-width: 360px;
}

#impula-motion .service-lines > span {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
}

#impula-motion .service-lines i {
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  background: var(--brand-gradient-contour);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#impula-motion .scene-four {
  width: 90%;
  left: 5%;
  top: 25%;
  text-align: center;
}

#impula-motion .scene-four h2 {
  font-size: clamp(44px, 6vw, 108px);
}

#impula-motion .final-link {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 15px 32px;
  background: var(--brand-gradient-h);
  border-radius: 40px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  margin: 10px 0;
  border: 0;
  box-shadow: 0 8px 30px rgba(37, 150, 255, 0.35), 0 4px 18px rgba(118, 45, 233, 0.4);
  transition: all .3s ease;
  cursor: pointer;
}

#impula-motion .final-link:hover {
  background: var(--brand-gradient-hover);
  box-shadow: 0 12px 38px rgba(37, 150, 255, 0.5), 0 6px 24px rgba(118, 45, 233, 0.55);
  transform: translateY(-2px);
}

#impula-motion .final-link span {
  font-size: 20px;
}

#impula-motion .closing-note {
  font-size: 13px;
  color: #9aa7c2;
}

#impula-motion .vertical-label {
  position: absolute;
  right: 2%;
  top: 45%;
  writing-mode: vertical-rl;
  font-size: 9px;
  letter-spacing: 2px;
  color: #5a6d91;
  z-index: 15;
}

#impula-motion .motion-footer {
  position: absolute;
  bottom: 25px;
  left: 5%;
  right: 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 25;
}

#impula-motion .motion-toggle {
  border: 0;
  background: none;
  padding: 10px 0;
  font-size: 15px;
  display: flex;
  gap: 12px;
  align-items: center;
  cursor: pointer;
}

#impula-motion .motion-toggle span {
  font-size: 9px;
  letter-spacing: 1.3px;
  color: #8596b5;
  font-weight: 700;
}

#impula-motion .chapters {
  display: flex;
  gap: 9px;
}

#impula-motion .chapters button {
  border: 1px solid transparent;
  background: none;
  color: #677b9f;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  min-width: 38px;
  height: 38px;
  border-radius: 50%;
  transition: all .3s;
  cursor: pointer;
}

#impula-motion .chapters button:hover {
  color: #fff;
  border-color: rgba(37, 150, 255, 0.4);
}

#impula-motion .chapters .selected {
  border-color: var(--brand-blue);
  color: #fff;
  background: linear-gradient(135deg, rgba(37, 150, 255, 0.22), rgba(118, 45, 233, 0.28));
  box-shadow: 0 0 16px var(--brand-blue-glow);
}

#impula-motion .scroll-hint {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: #8596b5;
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: 700;
}

#impula-motion .scroll-hint > span {
  font-size: 20px;
  color: var(--brand-blue);
}

#impula-motion .progress-track {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--motion-track-bg);
  z-index: 30;
}

#impula-motion .progress-track > div {
  height: 100%;
  background: var(--brand-gradient-contour);
  transform: scaleX(0);
  transform-origin: 0 50%;
  box-shadow: 0 0 12px var(--brand-blue), 0 0 24px var(--brand-purple);
}

#impula-motion.is-paused .animal,
#impula-motion.is-paused .light-field {
  animation-play-state: paused;
}

@keyframes breathe {
  from {
    opacity: .5;
    transform: scale(.85);
  }
  to {
    opacity: 1;
    transform: scale(1.15);
  }
}

/* --------------------------------------------------------------------------
   7. RESPONSIVE BREAKPOINTS & ACCESSIBILITY
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  #impula-motion h1 { font-size: clamp(38px, 6vw, 66px); }
  #impula-motion .scene { top: 20%; }
  #impula-motion .scene-two h2,
  #impula-motion .scene-three h2 { font-size: 5.5vw; }
  #impula-motion .animal-wrap { width: 90vw; left: 32%; }
  #impula-motion .eyebrow { font-size: 9px; letter-spacing: 1.4px; }
  #impula-motion .scene-description { font-size: 14px; }
  #impula-motion .scene-two { left: 52%; width: 44%; }
  #impula-motion .tags span { font-size: 11px; padding: 7px 12px; }
  #impula-motion .scroll-hint { font-size: 8px; letter-spacing: .5px; }
}

@media (max-width: 600px) {
  #impula-motion .animal-wrap { width: 85%; height: 53%; left: 22%; top: 46%; }
  #impula-motion .motion-stage { min-height: 730px; }
  #impula-motion .scene,
  #impula-motion .scene-two,
  #impula-motion .scene-three { top: 16%; left: 7%; width: 88%; }
  #impula-motion h1,
  #impula-motion .scene-two h2,
  #impula-motion .scene-three h2 { font-size: clamp(34px, 9.5vw, 54px); }
  #impula-motion .eyebrow { font-size: 8px; margin-bottom: 16px; }
  #impula-motion .scene-description { font-size: 13px; line-height: 1.6; max-width: 280px; }
  #impula-motion .giant-word { top: 60%; font-size: 150px; left: -15%; }
  #impula-motion .circle-link { font-size: 9px; gap: 12px; }
  #impula-motion .circle-link b { width: 36px; height: 36px; }
  #impula-motion .scene-three .service-lines { max-width: 280px; }
  #impula-motion .service-lines > span { font-size: 12px; padding: 8px 0; }
  #impula-motion .scene-three .scene-description { margin-bottom: 10px; }
  #impula-motion .scene-four { top: 22%; left: 5%; width: 90%; }
  #impula-motion .scene-four h2 { font-size: 10vw; }
  #impula-motion .vertical-label { display: none; }
  #impula-motion .motion-footer { bottom: 18px; left: 6%; right: 6%; }
  #impula-motion .scroll-hint { display: none; }
  #impula-motion .chapters button { height: 36px; min-width: 36px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  #impula-motion *,
  #impula-motion *::before,
  #impula-motion *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   8. RICH-TEXT CONTENT STYLING (.service-content)
   Styles raw semantic HTML pasted from the backend's rich-text editor
   (h2/h3/p/ul/ol/li/a/strong/blockquote/img/table) — the editor never
   outputs Tailwind classes, so this must style bare tags directly.
   -------------------------------------------------------------------------- */
.service-content {
  font-family: var(--font-sans);
  color: #334155;
  font-size: 0.9375rem;
  line-height: 1.75;
}

.service-content > *:first-child {
  margin-top: 0;
}

.service-content h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 2.75rem 0 1.1rem;
}

.service-content h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: #0f172a;
  letter-spacing: -0.01em;
  margin: 2rem 0 0.75rem;
}

.service-content p {
  margin: 0 0 1.25rem;
}

.service-content ul,
.service-content ol {
  margin: 0 0 1.25rem 1.1rem;
}

.service-content ul { list-style: disc; }
.service-content ol { list-style: decimal; }
.service-content li { margin-bottom: 0.5rem; }
.service-content li::marker { color: var(--brand-blue); }

.service-content a {
  color: var(--brand-blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(37, 150, 255, 0.35);
  transition: color 0.2s ease;
}
.service-content a:hover { color: var(--brand-purple); }

.service-content strong { color: #0f172a; font-weight: 700; }

.service-content blockquote {
  border-left: 3px solid var(--brand-blue);
  padding: 0.25rem 0 0.25rem 1.25rem;
  font-style: italic;
  color: #475569;
  margin: 1.75rem 0;
}

.service-content img {
  border-radius: 1.5rem;
  width: 100%;
  height: auto;
  margin: 2rem 0;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--glass-panel-shadow);
}

.service-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75rem 0;
  font-size: 0.875rem;
}
.service-content th,
.service-content td {
  border: 1px solid #e2e8f0;
  padding: 0.6rem 0.9rem;
  text-align: left;
}
.service-content th {
  background: #f1f5f9;
  font-weight: 700;
  color: #0f172a;
}

.service-content hr {
  border: none;
  border-top: 1px solid #e2e8f0;
  margin: 2.5rem 0;
}

/* Remaining heading levels the editor can output */
.service-content h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 1.25rem;
}
.service-content h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: #0f172a;
  margin: 1.75rem 0 0.6rem;
}
.service-content h5,
.service-content h6 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
  margin: 1.5rem 0 0.5rem;
}

/* Inline marks: italic, underline, strikethrough, highlight, sup/sub */
.service-content em { font-style: italic; }
.service-content u { text-decoration: underline; text-underline-offset: 2px; }
.service-content del,
.service-content s { color: #94a3b8; text-decoration: line-through; }
.service-content mark {
  background: linear-gradient(120deg, rgba(37, 150, 255, 0.18), rgba(118, 45, 233, 0.18));
  color: #0f172a;
  padding: 0.05em 0.3em;
  border-radius: 0.3em;
}
.service-content sup,
.service-content sub { font-size: 0.7em; }

/* Inline code + code blocks — a real monospace stack on purpose: this is
   literal source code, not a UI label, and needs true character alignment
   (the Jakarta Sans `--font-mono` used for nav/tags is a deliberate non-mono
   choice per section 3 of DESIGN_SYSTEM.md and doesn't apply here). */
.service-content code {
  font-family: 'SF Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: #f1f5f9;
  color: var(--brand-purple);
  padding: 0.15em 0.45em;
  border-radius: 0.4em;
  border: 1px solid #e2e8f0;
}
.service-content pre {
  font-family: 'SF Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, Menlo, Consolas, monospace;
  background: #0b0f17;
  color: #e2e8f0;
  padding: 1.25rem 1.5rem;
  border-radius: 1.25rem;
  overflow-x: auto;
  margin: 1.75rem 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  box-shadow: var(--glass-panel-shadow);
}
.service-content pre code {
  background: none;
  border: none;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

/* Nested lists + task (checkbox) lists */
.service-content li > ul,
.service-content li > ol {
  margin: 0.5rem 0 0.5rem 1.1rem;
}
.service-content ul[data-type="taskList"] {
  list-style: none;
  margin-left: 0;
}
.service-content ul[data-type="taskList"] li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.service-content ul[data-type="taskList"] li::marker { content: none; }
.service-content ul[data-type="taskList"] li > label {
  flex-shrink: 0;
  margin-top: 0.2rem;
}
.service-content ul[data-type="taskList"] input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--brand-blue);
}

/* Blockquote citation line (e.g. <blockquote><p>…</p><cite>Ad</cite></blockquote>) */
.service-content blockquote cite,
.service-content blockquote footer {
  display: block;
  margin-top: 0.5rem;
  font-style: normal;
  font-size: 0.8em;
  font-weight: 700;
  color: #0f172a;
}

/* Captioned images */
.service-content figure { margin: 2rem 0; }
.service-content figure img { margin: 0; }
.service-content figcaption {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: #94a3b8;
  text-align: center;
}

/* Video/embed iframes (YouTube, Vimeo, Loom…) — aspect-ratio keeps them
   responsive without needing a wrapper div the editor doesn't output */
.service-content iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: none;
  border-radius: 1.5rem;
  margin: 2rem 0;
  box-shadow: var(--glass-panel-shadow);
}

/* Tables: wrapped in .table-scroll at runtime (see page scripts) so wide
   comparison tables scroll horizontally instead of breaking the layout */
.service-content .table-scroll {
  overflow-x: auto;
  margin: 1.75rem 0;
  -webkit-overflow-scrolling: touch;
}
.service-content .table-scroll table { margin: 0; }

/* --------------------------------------------------------------------------
   8b. ARTICLE TABLE OF CONTENTS (İçindekiler)
   Auto-generated at runtime from .service-content h2/h3 (see page script) and
   scroll-spied into `.is-active`. Plain glass-panel-subtle, not liquid glass —
   this sits in normal page flow, not a persistent floating element (see 4.3).
   -------------------------------------------------------------------------- */
.service-content h2,
.service-content h3 {
  scroll-margin-top: 7rem;
}

.toc-link {
  display: block;
  padding: 0.4rem 0 0.4rem 0.85rem;
  border-left: 2px solid transparent;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #64748b;
  line-height: 1.35;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.toc-link:hover { color: #0f172a; }
.toc-link[data-level="3"] {
  padding-left: 1.6rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #94a3b8;
}
.toc-link.is-active { color: #0f172a; border-left-color: var(--brand-blue); }
.toc-link[data-level="3"].is-active { color: #334155; }

/* --------------------------------------------------------------------------
   9. LOGO GRADIENT ANIMATION
   Pure CSS: animates each <stop>'s stop-color with a staggered delay, so the
   blue/purple gradient appears to flow through the mark. Cheap — this is a
   paint-level SVG property, not a filter/compositing effect like the model's
   drop-shadow was, so it does not carry the same performance risk.
   -------------------------------------------------------------------------- */
@keyframes logoColorCycle {
  0% { stop-color: #2596ff; }
  50% { stop-color: #762de9; }
  100% { stop-color: #2596ff; }
}
.logo-animate-gradient .stop1 { animation: logoColorCycle 3s ease-in-out 0s infinite; }
.logo-animate-gradient .stop2 { animation: logoColorCycle 3s ease-in-out -0.5s infinite; }
.logo-animate-gradient .stop3 { animation: logoColorCycle 3s ease-in-out -1s infinite; }

@media (prefers-reduced-motion: reduce) {
  .logo-animate-gradient .stop1,
  .logo-animate-gradient .stop2,
  .logo-animate-gradient .stop3 {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Laravel entegrasyonu ek bileşenler (mockup'ta yoktu, Menu Builder'daki
   çok seviyeli "Hizmetlerimiz" menüsünü header'a mega-dropdown olarak
   bağlamak için eklendi) — impula.com/public_html reskin projesi.
   -------------------------------------------------------------------------- */
.nav-item.has-dropdown { display: flex; align-items: center; }
/* Eski tasarımdan aynen taşınan bazı partial'lar (ör. breadcrumb) bu CSS
   değişkenini kullanıyor; yeni tasarımda tanımlı değildi. */
:root { --color-blue4: #2596ff; }

/* İletişim sayfası: admin panelden gelen ham harita iframe'ini (Setting::
   contact_map_iframe) tam genişlikte, sabit yükseklikte göstermek için. */
.contact-map-embed-2026 iframe {
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
}

.nav-mega-panel {
  z-index: 60;
  /* Tailwind'in `.invisible` utility'si bu statik derlemede yok (mockup'ta
     hiç kullanılmamış), yani sadece opacity-0 kalıyordu — panel gözle
     görünmez ama TIKLANABİLİR kalıp altındaki her şeyi (ör. hizmet
     kartlarındaki ok butonlarını) kapatıyordu. Kapalıyken tıklamaları
     tamamen devre dışı bırakıyoruz. */
  visibility: hidden;
  pointer-events: none;
}
.nav-mega-panel.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}
.mobile-nav-accordion-btn span:last-child { transition: transform .2s ease; display: inline-block; }

/* Mega menü: kategoriler farklı yükseklikte (kimi 2 alt öğe, kimi 11) olduğu
   için CSS grid yerine columns kullanıyoruz — grid'de tüm satır en uzun
   hücreye göre eşitlenip devasa boş alanlar bırakıyordu. columns her bloğu
   kendi doğal yüksekliğinde bırakıp bir sonraki sütuna akıtır. */
.mega-menu-columns-2026 {
  columns: 2;
  column-gap: 1.75rem;
}
.mega-menu-columns-2026 > div {
  break-inside: avoid;
  margin-bottom: 1.25rem;
}
@media (min-width: 640px) {
  .mega-menu-columns-2026 { columns: 3; }
}
@media (min-width: 1024px) {
  .mega-menu-columns-2026 { columns: 5; }
}

/* Ana sayfa: header, koyu 3D hero'nun üzerinde kaydığı sürece (scroll
   mesafesinden bağımsız olarak, hero'nun kendisi görünür kaldığı sürece)
   beyaz/saydam kalır — .is-scrolled (salt 30px eşiği) hero hâlâ arkadayken
   devreye girip koyu metni koyu zemine gömmesin diye bu üzerine yazar. */
#site-header.force-dark-header,
#site-header.force-dark-header.is-scrolled {
  --header-glass-shadow: 0 8px 30px -12px rgba(0, 0, 0, 0.45);
}
#site-header.force-dark-header .glass-overlay {
  background: rgba(8, 7, 14, 0.5) !important;
}
#site-header.force-dark-header .nav-link,
#site-header.force-dark-header .nav-link:hover,
#site-header.force-dark-header .nav-link[data-active="true"] {
  color: #ffffff !important;
}
#site-header.force-dark-header .header-glass-btn {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}
#site-header.force-dark-header #mobile-menu-btn {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}
#site-header.force-dark-header .impula-logo-wordmark-2026 path {
  fill: #ffffff !important;
}

/* Native <details>/<summary> tabanlı akordeonlar (SSS, reklam yönetimi) —
   Bootstrap JS kaldırıldığı için sıfır bağımlılıklı bu yaklaşım tercih edildi. */
.faq-details summary {
  list-style: none;
}
.faq-details summary::-webkit-details-marker {
  display: none;
}
.faq-details[open] .faq-chevron {
  transform: rotate(180deg);
}

/* Hizmetlerimiz: gerçek Service kaydı sayısı mockup'taki sabit 4 karttan çok
   daha fazla (10-40+) olabildiği için dikey grid yerine yatay kaydırmalı bir
   şerit kullanıyoruz — scroll-snap Tailwind utility'leri (snap-x vb.) derlenmiş
   CSS'te yok, bu yüzden düz CSS ile. */
.services-scroll-2026 {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  padding: 0.25rem 0.25rem 1.25rem;
  margin-bottom: -1.25rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  /* Tarayıcı scrollbar'ı tamamen gizli: kaydırma fare tekerleği/trackpad/dokunma
     ile çalışır, mockup'taki kartlarda da görünür bir scrollbar yok. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.services-scroll-2026::-webkit-scrollbar {
  display: none;
  height: 0;
}
.services-scroll-2026 > a {
  flex: 0 0 auto;
  width: 260px;
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  .services-scroll-2026 > a {
    width: 280px;
  }
}