/* 
 * Websitex Pro - Premium Dark Theme Stylesheet
 * 
 * TABLE OF CONTENTS:
 * 1. Variables
 * 2. Reset & Base
 * 3. Typography
 * 4. Components (Buttons, Cards)
 * 5. Layout & Container
 * 6. Sections
 *    - 6.1 Announcement Bar
 *    - 6.2 Header & Navigation
 *    - 6.3 Hero
 *    - 6.4 Trust Bar
 *    - 6.5 Manifesto
 *    - 6.6 Comparison
 *    - 6.7 Services
 *    - 6.8 Process
 *    - 6.9 Portfolio
 *    - 6.10 Results
 *    - 6.11 Testimonials
 *    - 6.12 Tech Stack
 *    - 6.13 FAQ
 *    - 6.14 Blog Preview
 *    - 6.15 Final CTA
 *    - 6.16 Footer
 * 7. Animations
 * 8. Utilities
 * 9. Accessibility & Reduced Motion
 */

/* ==========================================================================
   1. VARIABLES
   ========================================================================== */
:root {
  --color-primary: #7ED321;
  --color-primary-dark: #6BBF1A;
  --color-primary-light: #96E03A;
  --color-primary-glow: rgba(126, 211, 33, 0.15);
  --color-primary-glow-strong: rgba(126, 211, 33, 0.3);

  --color-bg-primary: #0A0A0A;
  --color-bg-secondary: #111111;
  --color-bg-tertiary: #161616;
  --color-bg-card: #1A1A1A;
  --color-bg-card-hover: #222222;

  --color-text-primary: #F5F5F5;
  --color-text-secondary: #A0A0A0;
  --color-text-tertiary: #949494;

  --color-border: rgba(255, 255, 255, 0.06);
  --color-border-hover: rgba(255, 255, 255, 0.12);
  --color-border-active: rgba(126, 211, 33, 0.3);

  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px rgba(126, 211, 33, 0.15);
  --shadow-glow-strong: 0 0 40px rgba(126, 211, 33, 0.25);

  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  --container-max: 1200px;
  --container-padding: 1.25rem;

  --header-height: 72px;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-primary);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background-color: var(--color-primary-glow);
  color: #ffffff;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

button, input, textarea, select {
  font: inherit;
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1 {
  font-size: var(--text-4xl); /* 2.25rem mobile */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

h2 {
  font-size: var(--text-3xl); /* 1.875rem mobile */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--text-xl); /* 1.25rem mobile */
  font-weight: 600;
  line-height: 1.3;
}

p {
  font-size: var(--text-base); /* 1rem mobile */
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.section-label {
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.section-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background-color: var(--color-primary);
}

.section-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  max-width: 640px;
  margin: 1.5rem auto 0;
  text-align: center;
}

@media (min-width: 1024px) {
  h1 { font-size: var(--text-6xl); } /* 3.75rem desktop */
  h2 { font-size: var(--text-5xl); } /* 3rem desktop */
  h3 { font-size: var(--text-2xl); } /* 1.5rem desktop */
  p { font-size: var(--text-lg); }   /* 1.125rem desktop */
}

/* ==========================================================================
   4. COMPONENTS
   ========================================================================== */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: var(--text-base);
  padding: 0.875rem 2rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-base);
  border: none;
  font-family: inherit;
  text-decoration: none;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #0A0A0A;
  box-shadow: var(--shadow-glow);
}

.btn-primary:hover, .btn-primary:focus-visible {
  background-color: var(--color-primary-light);
  box-shadow: var(--shadow-glow-strong);
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

.btn-secondary:hover, .btn-secondary:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-primary);
  padding: 0;
  font-weight: 500;
}

.btn-ghost:hover, .btn-ghost:focus-visible {
  gap: 0.75rem; /* widens */
}

.btn-large {
  padding: 1.125rem 2.5rem;
  font-size: var(--text-lg);
}

/* Cards */
.card {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  transition: all var(--transition-base);
}

.card:hover {
  border-color: var(--color-border-active);
  box-shadow: var(--shadow-glow);
  transform: translateY(-4px);
}

/* ==========================================================================
   5. LAYOUT & CONTAINER
   ========================================================================== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

@media (min-width: 1024px) {
  .container {
    padding: 0 2rem;
  }
}

/* ==========================================================================
   6. SECTIONS
   ========================================================================== */

/* 6.1 Announcement Bar */
.announcement-bar {
  background-color: #080808;
  padding: 0.625rem 0;
}

.announcement-bar .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.announcement-bar a,
.announcement-bar tel {
  color: var(--color-primary);
}

.announcement-bar a:hover {
  text-decoration: underline;
}

.announcement-bar__divider {
  width: 1px;
  height: 14px;
  background-color: var(--color-border);
  display: inline-block;
}

.announcement-bar__hours {
  display: none;
}

@media (min-width: 640px) {
  .announcement-bar__hours {
    display: block;
  }
}

/* 6.2 Header & Navigation */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: rgba(10, 10, 10, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-border);
  transition: all var(--transition-base);
  height: var(--header-height);
}

.header.scrolled {
  background-color: rgba(10, 10, 10, 0.95);
  box-shadow: var(--shadow-md);
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.header__logo img {
  height: 40px;
  width: auto;
}

.header__nav {
  display: none;
}

.header__cta {
  display: none;
}

.hamburger {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 1001;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-text-primary);
  transition: all var(--transition-base);
  position: relative;
}

.hamburger span::before,
.hamburger span::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--color-text-primary);
  transition: all var(--transition-base);
}

.hamburger span::before { top: -7px; }
.hamburger span::after { top: 7px; }

.hamburger.active span {
  background-color: transparent;
}

.hamburger.active span::before {
  transform: rotate(45deg);
  top: 0;
}

.hamburger.active span::after {
  transform: rotate(-45deg);
  top: 0;
}

.mobile-menu {
  position: fixed;
  inset: 0;
  background-color: rgba(10, 10, 10, 0.98);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.mobile-menu.active {
  opacity: 1;
  pointer-events: all;
}

.mobile-menu__links {
  list-style: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.mobile-menu__links a {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-text-primary);
  transition: color var(--transition-fast);
}

.mobile-menu__links a:hover {
  color: var(--color-primary);
}

.mobile-menu .btn-primary {
  margin-top: 2rem;
  width: 100%;
  max-width: 300px;
  justify-content: center;
}

@media (min-width: 1024px) {
  .header__nav {
    display: flex;
  }
  .header__cta {
    display: inline-flex;
  }
  .hamburger {
    display: none;
  }
  .header__links {
    display: flex;
    gap: 2rem;
    list-style: none;
  }
  .header__links a {
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: var(--text-sm);
    transition: color var(--transition-fast);
    position: relative;
  }
  .header__links a:hover {
    color: var(--color-text-primary);
  }
  .header__links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: width var(--transition-fast);
  }
  .header__links a:hover::after {
    width: 100%;
  }
  .header__links li.has-dropdown {
    position: relative;
  }
  .header__dropdown {
    position: absolute;
    top: 100%;
    left: -1rem;
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.75rem 0;
    min-width: 220px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: all var(--transition-base);
  }
  .header__links li.has-dropdown:hover .header__dropdown,
  .header__links li.has-dropdown:focus-within .header__dropdown {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
  }
  .header__dropdown a {
    display: block;
    padding: 0.625rem 1.5rem;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
  }
  .header__dropdown a::after {
    display: none;
  }
  .header__dropdown a:hover {
    color: var(--color-primary);
    background-color: rgba(126, 211, 33, 0.05);
  }
}

/* Shared page-hero base (used by hakkimizda + pages without their own hero CSS, e.g. gizlilik/KVKK) */
.page-hero {
  padding-top: var(--header-height);
  background: var(--color-bg-primary);
  position: relative;
  overflow: hidden;
}

.page-hero__content {
  padding: 4rem 0 3rem;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* Ambient hero background effect (canvas, injected by main.js) — always painted behind
   the hero's own content, regardless of DOM order, via isolation + negative z-index. */
.hero-fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  display: block;
  mix-blend-mode: screen;
}

@media (prefers-reduced-motion: reduce) {
  .hero-fx-canvas { display: none !important; }
}

/* .hero__visual used to be hidden once the ambient hero-fx tube activated
   (the tube covered the whole hero, so the static glow placeholder was
   redundant). It now hosts its own small "energy globe" scene instead, so it
   stays visible alongside the tube rather than being hidden by it. */

.hero-globe-canvas {
  width: 440px;
  height: 440px;
  max-width: 100%;
  display: block;
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-globe-canvas { display: none !important; }
}

/* Persistent cursor-following glow — full-viewport transparent overlay so the
   library's own pointer-tracking has real range of motion (see js/main.js);
   the small "cursor sized" look comes from the tube/bloom settings, not from
   the canvas's own DOM size. Fixed, on top of content, never blocks clicks. */
.cursor-fx-wrapper {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 8000;
  pointer-events: none;
  mix-blend-mode: screen;
}

.cursor-fx-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .cursor-fx-wrapper { display: none !important; }
}

/* 6.3 Hero */
.hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-height) + 2rem);
  background: radial-gradient(ellipse at 70% 50%, rgba(126, 211, 33, 0.05) 0%, transparent 60%);
  position: relative;
  overflow: hidden;
}

.hero .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

.hero__content {
  order: 1;
  text-align: center;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: rgba(126, 211, 33, 0.08);
  border: 1px solid rgba(126, 211, 33, 0.2);
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-primary);
  margin-bottom: 2rem;
}

.hero__badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-primary);
  animation: pulse 2s infinite;
}

.hero__title {
  margin-bottom: 1.5rem;
}

.hero__title span {
  color: var(--color-primary);
}

.hero__text {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  max-width: 540px;
  margin-bottom: 2rem;
  margin-left: auto;
  margin-right: auto;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.hero__actions .btn {
  width: 100%;
  max-width: 320px;
}

.hero__trust-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-top: 2.5rem;
  justify-content: center;
}

.hero__trust-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.hero__trust-note svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
}

.hero__visual {
  order: 2;
  display: none;
}

@media (min-width: 1024px) {
  .hero .container {
    grid-template-columns: 1fr 1fr;
  }
  .hero__content {
    text-align: left;
  }
  .hero__text {
    margin-left: 0;
    margin-right: 0;
  }
  .hero__actions {
    flex-direction: row;
  }
  .hero__actions .btn {
    width: auto;
  }
  .hero__trust-notes {
    justify-content: flex-start;
  }
  .hero__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .hero__visual-glow {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(126, 211, 33, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
    position: absolute;
    animation: float 6s ease-in-out infinite;
  }
}

/* 6.4 Trust Bar */
.trust-bar {
  background-color: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 3rem 0;
}

.trust-bar__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  text-align: center;
}

.trust-bar__item {
  position: relative;
}

.trust-bar__number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1;
  text-shadow: 0 0 15px rgba(126, 211, 33, 0.4);
}

.trust-bar__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: 0.5rem;
}

@media (min-width: 640px) {
  .trust-bar {
    padding: 4rem 0;
  }
  .trust-bar__grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .trust-bar__item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 10%;
    right: -1rem;
    height: 80%;
    width: 1px;
    background-color: var(--color-border);
  }
}

@media (min-width: 1024px) {
  .trust-bar__number {
    font-size: 3rem;
  }
}

/* 6.4b Brand strip — the real client sites from the portfolio, right under
   the trust numbers so the social proof reads as one block. Each card links
   out to the live site. */
.brand-strip {
  padding: 2.5rem 0 3rem;
  border-bottom: 1px solid var(--color-border);
}

.brand-strip__label {
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 0 0 1.5rem;
}

.brand-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
}

/* li is a stretched grid item; making it a flex box lets the card fill its
   full height, so both cards in a row stay equal even when a name wraps. */
.brand-strip__list li {
  display: flex;
}

.brand-strip__link {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: rgba(255, 255, 255, 0.02);
  transition: border-color var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast);
  min-height: 76px;
}

.brand-strip__link:hover,
.brand-strip__link:focus-visible {
  border-color: rgba(126, 211, 33, 0.45);
  background-color: rgba(126, 211, 33, 0.05);
  transform: translateY(-2px);
}

.brand-strip__logo,
.brand-strip__initials {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.brand-strip__logo {
  background-color: #ffffff;
  padding: 5px;
}

.brand-strip__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.brand-strip__initials {
  background-color: rgba(126, 211, 33, 0.12);
  color: var(--color-primary);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: 0.02em;
}

.brand-strip__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.brand-strip__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.25;
}

.brand-strip__cat {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

@media (min-width: 768px) {
  .brand-strip__list {
    /* 6 markayla 3x2 dizilim; 4 sütun tek satırda sığmıyordu */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
}

/* Blog author badge (E-E-A-T byline) — sits right under the meta line. */
.blog-meta:has(+ .author-badge) {
  margin-bottom: var(--space-md);
}

.author-badge {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: var(--space-xl);
}

.author-badge img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: contain;
  background-color: #0f0f0f;
  border: 1px solid var(--color-border);
  padding: 4px;
  flex-shrink: 0;
}

.author-badge__info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.author-badge__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

.author-badge__role {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.author-badge__role a {
  color: var(--color-primary);
  text-decoration: none;
}

.author-badge__role a:hover {
  text-decoration: underline;
}

/* 6.5 Manifesto */
.manifesto {
  padding: 6rem 0;
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(126, 211, 33, 0.03) 0%, transparent 60%);
}

.manifesto h2 {
  max-width: 800px;
  margin: 0 auto 1.5rem;
}

.manifesto__text {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--color-text-secondary);
  max-width: 720px;
  margin: 0 auto 4rem;
}

.manifesto__text b {
  font-weight: 700;
  color: var(--color-text-primary);
}

.manifesto__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.manifesto__card {
  text-align: center;
  padding: 2.5rem;
}

.manifesto__card-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(126, 211, 33, 0.08);
  border-radius: var(--radius-md);
  margin: 0 auto 1.5rem;
}

.manifesto__card-icon svg {
  width: 28px;
  height: 28px;
  color: var(--color-primary);
}

.manifesto__card-title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 1rem;
}

.manifesto__card-desc {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

@media (min-width: 1024px) {
  .manifesto {
    padding: 8rem 0;
  }
  .manifesto__text {
    font-size: 1.25rem;
  }
  .manifesto__cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 6.6 Comparison */
.comparison {
  background-color: var(--color-bg-secondary);
  padding: 6rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.network-fx-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.95;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .network-fx-bg { display: none !important; }
}

.comparison__table {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
}

.comparison__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  align-items: start;
}

.comparison__criterion {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: var(--text-base);
  margin-bottom: 0.75rem;
}

.comparison__col {
  padding: 1rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.comparison__col--template {
  background-color: rgba(255, 255, 255, 0.02);
  border-left: 3px solid rgba(255, 255, 255, 0.1);
}

.comparison__col--custom {
  background-color: rgba(126, 211, 33, 0.03);
  border-left: 3px solid var(--color-primary);
}

.comparison__col-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.comparison__col--template .comparison__col-label {
  color: var(--color-text-tertiary);
}

.comparison__col--custom .comparison__col-label {
  color: var(--color-primary);
}

.comparison__summary {
  margin-top: 3rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: var(--text-lg);
  line-height: 1.8;
  color: var(--color-text-secondary);
}

.comparison__summary span {
  color: var(--color-primary);
  font-weight: 600;
}

.comparison__cta {
  margin-top: 2.5rem;
  text-align: center;
}

@media (min-width: 1024px) {
  .comparison {
    padding: 8rem 0;
  }
  .comparison__row {
    grid-template-columns: 1.2fr 1fr 1fr;
    align-items: center;
  }
  .comparison__criterion {
    margin-bottom: 0;
  }
}

/* 6.7 Services */
.services {
  padding: 6rem 0;
  text-align: center;
}

.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
}

.services__card {
  text-align: left;
  display: flex;
  flex-direction: column;
}

.services__card-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(126, 211, 33, 0.08);
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
}

.services__card-icon svg {
  width: 28px;
  height: 28px;
  color: var(--color-primary);
}

.services__card-title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 1rem;
}

.services__card-desc {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.services__card-features {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.services__card-feature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.services__card-feature svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
}

.services__card-link {
  color: var(--color-primary);
  font-weight: 500;
  font-size: var(--text-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: gap var(--transition-fast);
}

.services__card-link:hover {
  gap: 0.75rem;
}

.services__card-link svg {
  width: 14px;
  height: 14px;
}

@media (min-width: 1024px) {
  .services {
    padding: 8rem 0;
  }
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 6.8 Process */
.process {
  background-color: var(--color-bg-secondary);
  padding: 6rem 0;
  text-align: center;
}

.process__timeline {
  margin-top: 3rem;
  position: relative;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.process__timeline::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--color-border);
}

.process__step {
  display: flex;
  gap: 1.5rem;
  position: relative;
  padding-bottom: 3rem;
}

.process__step:last-child {
  padding-bottom: 0;
}

.process__number {
  width: 48px;
  height: 48px;
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: 50%;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary);
  position: relative;
  z-index: 2;
  transition: all var(--transition-base);
}

.process__step:hover .process__number {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-glow);
  background-color: rgba(126, 211, 33, 0.08);
}

.process__content {
  flex: 1;
  padding-top: 0.5rem;
}

.process__step-title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.75rem;
}

.process__step-desc {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 0.75rem;
}

.process__step-duration {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  background-color: rgba(255, 255, 255, 0.03);
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-full);
}

.process .btn-primary {
  margin-top: 3rem;
}

@media (min-width: 1024px) {
  .process {
    padding: 8rem 0;
  }
  .process__timeline::before {
    left: 32px;
  }
  .process__step {
    gap: 2rem;
  }
  .process__number {
    width: 64px;
    height: 64px;
    min-width: 64px;
    font-size: var(--text-base);
  }
}

/* 6.9 Portfolio */
.portfolio {
  padding: 6rem 0;
  text-align: center;
}

.portfolio__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
}

.portfolio__card {
  overflow: hidden;
  padding: 0;
  text-align: left;
}

.portfolio__card-image {
  width: 100%;
  aspect-ratio: 16/10;
  background-color: var(--color-bg-tertiary);
  overflow: hidden;
  position: relative;
}

.portfolio__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.portfolio__card:hover .portfolio__card-image img {
  transform: scale(1.06);
}

.portfolio__card-logo-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  z-index: 2;
}

.portfolio__card-logo-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

/* ---- 3D tilt on hover (desktop, pointer:fine, motion allowed) ---- */
.portfolio__grid {
  perspective: 1400px;
}

.portfolio__card--tilt {
  transform: perspective(1400px) rotateX(0deg) rotateY(0deg) translateZ(0);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color var(--transition-fast);
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .portfolio__card--tilt:hover {
    box-shadow: 0 24px 48px -16px rgba(0,0,0,0.55), 0 0 0 1px var(--color-border-active);
    transform: perspective(1400px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateZ(18px);
  }
}

.portfolio__card-body {
  padding: 1.5rem 1.5rem 2rem;
}

.portfolio__card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.portfolio__card-tag {
  font-size: var(--text-xs);
  color: var(--color-primary);
  background-color: rgba(126, 211, 33, 0.08);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-weight: 500;
}

.portfolio__card-title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.75rem;
}

.portfolio__card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.portfolio__card-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.portfolio__metric {
  text-align: center;
}

.portfolio__metric-value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-primary);
}

.portfolio__metric-label {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-top: 0.25rem;
}

.portfolio__card-link {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
}

.portfolio__card-link svg {
  transition: transform var(--transition-fast);
}

.portfolio__card-link:hover svg {
  transform: translate(2px, -2px);
}

.portfolio > .btn-secondary {
  margin-top: 3rem;
}

.section-cta {
  margin-top: 3rem;
}

.portfolio__cta-text {
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  margin-bottom: 1.25rem;
}

.section-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

@media (min-width: 640px) {
  .section-cta__actions {
    flex-direction: row;
  }
}

@media (min-width: 640px) {
  .portfolio__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .portfolio {
    padding: 8rem 0;
  }
  .portfolio__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

/* 6.10 Results */
.results {
  background-color: var(--color-bg-secondary);
  padding: 6rem 0;
  text-align: center;
  background-image: linear-gradient(135deg, rgba(255,255,255,0.01) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.01) 50%, rgba(255,255,255,0.01) 75%, transparent 75%, transparent);
  background-size: 20px 20px;
}

.results__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 4rem;
}

.results__item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  transition: opacity 0.7s ease, transform 0.7s ease, border-color var(--transition-base), box-shadow var(--transition-base);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  /* Flexbox for graphic+text layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  /* Initial state for stagger animation — JS adds .stat-visible */
  opacity: 0;
  transform: translateY(28px);
}

.results__item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top right, rgba(126, 211, 33, 0.1), transparent 50%);
  opacity: 0;
  transition: opacity var(--transition-base);
}

/* Revealed state — added by JS stagger */
.results__item.stat-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hover lifts the card AFTER it's revealed */
.results__item.stat-visible:hover {
  transform: translateY(-5px);
  border-color: rgba(126, 211, 33, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(126, 211, 33, 0.1);
}

.results__item.stat-visible:hover::before {
  opacity: 1;
}

.results__number {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1;
  margin-bottom: 0.5rem;
  display: inline-block;
  text-shadow: 0 0 15px rgba(126, 211, 33, 0.4);
}

.results__number span {
  color: var(--color-text-primary);
}

.results__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-top: 0.5rem;
}

.results__desc {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-top: 0.5rem;
  line-height: 1.5;
}

@media (min-width: 640px) {
  .results__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .results__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .results {
    padding: 8rem 0;
  }
  .results__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
  .results__number {
    font-size: 3.5rem;
  }
}

/* 6.11 Testimonials */
.testimonials {
  padding: 6rem 0;
  text-align: center;
}

.testimonials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
}

.testimonials__card {
  text-align: left;
  display: flex;
  flex-direction: column;
}

.testimonials__quote-icon {
  width: 40px;
  height: 40px;
  color: rgba(126, 211, 33, 0.3);
  margin-bottom: 1.5rem;
}

.testimonials__text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.8;
  font-style: italic;
  flex-grow: 1;
  margin-bottom: 1.5rem;
}

.testimonials__divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-border);
  margin-bottom: 1.5rem;
}

.testimonials__author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.testimonials__author-info {
  display: flex;
  flex-direction: column;
}

.testimonials__author-name {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: var(--text-sm);
}

.testimonials__author-role {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.testimonials__stars {
  display: flex;
  gap: 0.25rem;
  margin-top: 1rem;
}

.testimonials__stars svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
}

@media (min-width: 1024px) {
  .testimonials {
    padding: 8rem 0;
  }
  .testimonials__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 6.12 Tech Stack */
.tech-stack {
  background-color: var(--color-bg-secondary);
  padding: 6rem 0;
  text-align: center;
}

.tech-stack__text {
  max-width: 640px;
  margin: 0 auto 3rem;
}

.tech-stack__groups {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.tech-stack__group {
  text-align: center;
}

.tech-stack__group-title {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
  margin-bottom: 1rem;
  font-weight: 600;
}

.tech-stack__logos {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.tech-stack__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background-color: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: all var(--transition-base);
}

.tech-stack__logo:hover {
  border-color: var(--color-border);
  background-color: rgba(255, 255, 255, 0.04);
}

.tech-stack__logo svg,
.tech-stack__logo span {
  width: 32px;
  height: 32px;
  color: var(--color-text-secondary);
}

.tech-stack__logo-name {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

@media (min-width: 640px) {
  .tech-stack__groups {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .tech-stack {
    padding: 8rem 0;
  }
  .tech-stack__groups {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* 6.13 FAQ */
.faq {
  padding: 6rem 0;
  text-align: center;
}

.faq__list {
  max-width: 800px;
  margin: 3rem auto 0;
  text-align: left;
}

.faq__item {
  border-bottom: 1px solid var(--color-border);
}

.faq__item:first-child {
  border-top: 1px solid var(--color-border);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.5rem 0;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-primary);
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: inherit;
  text-align: left;
  gap: 1rem;
  transition: color var(--transition-fast);
}

.faq__question:hover {
  color: var(--color-primary);
}

.faq__icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  color: var(--color-text-tertiary);
  transition: transform var(--transition-base);
}

.faq__item.active .faq__icon {
  transform: rotate(45deg);
}

.faq__item.active .faq__question {
  color: var(--color-primary);
}

.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow) ease-out;
}

.faq__answer-inner {
  padding: 0 0 1.5rem;
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.8;
}

@media (min-width: 1024px) {
  .faq {
    padding: 8rem 0;
  }
  .faq__question {
    font-size: var(--text-lg);
  }
}

/* 6.14 Blog Preview */
.blog-preview {
  background-color: var(--color-bg-secondary);
  padding: 6rem 0;
  text-align: center;
}

.blog-preview__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
}

.blog-preview__card {
  overflow: hidden;
  padding: 0;
  text-align: left;
}

.blog-preview__card-image {
  width: 100%;
  aspect-ratio: 16/9;
  background-color: var(--color-bg-tertiary);
  overflow: hidden;
  position: relative;
}

.blog-preview__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.blog-preview__card:hover .blog-preview__card-image img {
  transform: scale(1.05);
}

.blog-preview__card-body {
  padding: 1.5rem;
}

.blog-preview__card-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
  background-color: rgba(126, 211, 33, 0.08);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  margin-bottom: 1rem;
}

.blog-preview__card-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.4;
  margin-bottom: 0.75rem;
  transition: color var(--transition-fast);
}

.blog-preview__card:hover .blog-preview__card-title {
  color: var(--color-primary);
}

.blog-preview__card-meta {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-bottom: 0.75rem;
}

.blog-preview__card-excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.blog-preview > .btn-secondary {
  margin-top: 3rem;
}

@media (min-width: 1024px) {
  .blog-preview {
    padding: 8rem 0;
  }
  .blog-preview__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 6.15 Final CTA */
.final-cta {
  padding: 6rem 0;
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(126, 211, 33, 0.06) 0%, transparent 70%);
  position: relative;
  overflow: hidden;
}

.planet-fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  .planet-fx-canvas { display: none !important; }
}

/* Darkens the middle of the section a touch so the CTA text/button stay
   readable over the glowing globe instead of the bright green core fighting
   the (also green) primary button right where it sits. */
.final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(5, 8, 6, 0.55) 0%, rgba(5, 8, 6, 0.15) 45%, transparent 75%);
}

.final-cta__content {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.final-cta h2 {
  margin-bottom: 1.5rem;
}

.final-cta__text {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin-bottom: 2.5rem;
}

.final-cta .btn-primary.btn-large {
  animation: subtlePulse 2s infinite;
}

.final-cta__notes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}

@keyframes subtlePulse {
  0% { box-shadow: 0 0 20px rgba(126, 211, 33, 0.15); }
  50% { box-shadow: 0 0 30px rgba(126, 211, 33, 0.3); }
  100% { box-shadow: 0 0 20px rgba(126, 211, 33, 0.15); }
}

@media (min-width: 1024px) {
  .final-cta {
    padding: 8rem 0;
  }
}

/* 6.16 Footer */
.site-footer {
  background-color: #080808;
  border-top: 1px solid var(--color-border);
  padding: 4rem 0 2rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Small brand "energy globe" — same effect family as the homepage's final-cta
   one, but lighter (no energy veins, fewer segments) since it now sits on
   every page. Confined to a top band and faded out via mask-image so it
   never sits behind the dense footer link columns. */
.footer-globe-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 320px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  display: block;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.35) 65%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.35) 65%, rgba(0, 0, 0, 0) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .footer-globe-canvas { display: none !important; }
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  position: relative;
  z-index: 1;
}

.site-footer__bottom {
  position: relative;
  z-index: 1;
}

.site-footer__logo img {
  height: 36px;
  margin-bottom: 1rem;
}

.site-footer__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.site-footer__social {
  display: flex;
  gap: 1rem;
}

.site-footer__social a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
}

.site-footer__social a:hover {
  color: var(--color-primary);
  background-color: rgba(126, 211, 33, 0.08);
}

.site-footer__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.25rem;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.site-footer__links a {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

.site-footer__links a:hover {
  color: var(--color-primary);
}

.site-footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: 0.75rem;
}

.site-footer__contact-item svg {
  width: 16px;
  color: var(--color-text-tertiary);
  margin-top: 2px;
  flex-shrink: 0;
}

.site-footer__bottom {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
}

.site-footer__bottom p {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.site-footer__bottom-links {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
}

.site-footer__bottom-links a {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  transition: color var(--transition-fast);
}

.site-footer__bottom-links a:hover {
  color: var(--color-text-secondary);
}

@media (min-width: 640px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }
  .site-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ==========================================================================
   7. ANIMATIONS
   ========================================================================== */

/* Fade In / Scroll Reveal */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-delay-1 { transition-delay: 0.1s; }
.fade-in-delay-2 { transition-delay: 0.2s; }
.fade-in-delay-3 { transition-delay: 0.3s; }
.fade-in-delay-4 { transition-delay: 0.4s; }

/* Keyframes */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ==========================================================================
   8. UTILITIES
   ========================================================================== */
.text-center { text-align: center; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-8 { margin-bottom: 2rem; }

/* Focus styles for accessibility */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ==========================================================================
   9. ACCESSIBILITY & REDUCED MOTION
   ========================================================================== */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: #0A0A0A;
  padding: 8px;
  z-index: 9999;
  transition: top var(--transition-fast);
}

.skip-to-content:focus {
  top: 0;
}

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

/* ==========================================================================
   WHATSAPP FLOATING BUTTON
   ========================================================================== */
.whatsapp-float {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #25D366;
  color: #ffffff;
  border-radius: var(--radius-full);
  padding: 0.875rem 1.5rem 0.875rem 1.125rem;
  box-shadow: 0 4px 24px rgba(37, 211, 102, 0.4);
  font-weight: 600;
  font-size: var(--text-sm);
  font-family: var(--font-primary);
  text-decoration: none;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  animation: wa-pulse 3s ease-in-out infinite;
}

.whatsapp-float:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 32px rgba(37, 211, 102, 0.55);
  color: #ffffff;
}

.whatsapp-float__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  fill: #ffffff;
}

.whatsapp-float__text {
  display: none;
}

@media (min-width: 640px) {
  .whatsapp-float__text {
    display: inline;
  }
}

@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 4px 24px rgba(37, 211, 102, 0.4); }
  50%       { box-shadow: 0 4px 36px rgba(37, 211, 102, 0.65); }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float { animation: none; }
}

/* ==========================================================================
   İLETİŞİM SAYFASI
   ========================================================================== */
.contact-hero {
  padding: calc(var(--header-height) + 4rem) 0 4rem;
  background: var(--color-bg-primary);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.contact-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 350px;
  background: radial-gradient(ellipse, rgba(126,211,33,0.07) 0%, transparent 70%);
  pointer-events: none;
}

.contact-hero h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  margin: 0.75rem 0 1.25rem;
}

.contact-hero p {
  font-size: 1.1rem;
  max-width: 560px;
  margin: 0 auto;
}

/* Grid: form + sidebar */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding: 4rem 0 6rem;
}

@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1.15fr 1fr;
    gap: 4rem;
    align-items: start;
  }
}

/* Form kart */
.contact-form-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 2.5rem 2rem;
}

@media (min-width: 640px) {
  .contact-form-card { padding: 3rem; }
}

.contact-form-card h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.contact-form-card > p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: 2rem;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
}

.form-group .form-required {
  color: var(--color-primary);
  margin-left: 2px;
}

.form-control {
  width: 100%;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.875rem 1rem;
  color: var(--color-text-primary);
  font-size: var(--text-base);
  font-family: var(--font-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  resize: vertical;
}

.form-control::placeholder {
  color: var(--color-text-tertiary);
}

.form-control:focus {
  border-color: var(--color-border-active);
  box-shadow: 0 0 0 3px rgba(126,211,33,0.35);
}

.form-control[aria-invalid="true"] {
  border-color: #e74c3c;
}

.form-control[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(231,76,60,0.25);
}

.form-error {
  display: none;
  margin-top: 0.4rem;
  font-size: var(--text-sm);
  color: #e74c3c;
}

.form-error.is-visible {
  display: block;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 480px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
  cursor: pointer;
}

.form-submit {
  width: 100%;
  margin-top: 0.5rem;
  font-size: 1.05rem;
  padding: 1rem 2rem;
  cursor: pointer;
  border: none;
}

/* Sidebar */
.contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.contact-info-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.contact-info-card:hover {
  border-color: var(--color-border-active);
  box-shadow: var(--shadow-glow);
}

.contact-info-card__icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary-glow);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.contact-info-card h3 {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.contact-info-card a,
.contact-info-card p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
  line-height: 1.6;
}

.contact-info-card a:hover { color: var(--color-primary); }

/* WhatsApp CTA card */
.contact-wa-card {
  background: linear-gradient(135deg, #1a2e1a 0%, #0d1f0d 100%);
  border: 1px solid rgba(37,211,102,0.25);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  overflow: hidden;
}

.contact-wa-card::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(37,211,102,0.15), transparent 70%);
  pointer-events: none;
}

.contact-wa-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: #ffffff;
}

.contact-wa-card__desc {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
  margin: 0;
}

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: #25D366;
  color: #ffffff;
  font-weight: 600;
  font-size: var(--text-base);
  padding: 0.9rem 1.75rem;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  border: none;
  cursor: pointer;
  font-family: var(--font-primary);
}

.btn-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37,211,102,0.4);
  color: #ffffff;
}

.btn-whatsapp svg { fill: #ffffff; flex-shrink: 0; }

/* Form success state */
.form-success {
  display: none;
  text-align: center;
  padding: 3rem 2rem;
}

.form-success__icon {
  width: 64px; height: 64px;
  background: var(--color-primary-glow);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.5rem;
  color: var(--color-primary);
}

.form-success h3 {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}


/* === RESULTS GRAPHICS === */

.results__graphic {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

/* Progress Ring */
.progress-ring {
  transform: rotate(-90deg);
}
.progress-ring__bg {
  fill: transparent;
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 6;
}
.progress-ring__circle {
  fill: transparent;
  stroke: var(--color-primary);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 2s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 0 8px rgba(126, 211, 33, 0.5));
}
.progress-ring__icon {
  position: absolute;
  font-size: 2rem;
  color: var(--color-text-primary);
}

/* Sparkline Bars */
.sparklines {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 60px;
  width: 80px;
}
.sparkline-bar {
  flex: 1;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px 4px 0 0;
  transition: height 1.5s ease, background-color 0.5s ease;
  position: relative;
  height: 0%; /* starts at 0 */
}
.sparkline-bar.active {
  background-color: var(--color-primary);
  box-shadow: 0 0 10px rgba(126, 211, 33, 0.3);
}

/* Radar Pulse */
.radar-icon {
  font-size: 2.5rem;
  color: var(--color-primary);
  position: relative;
  z-index: 2;
  text-shadow: 0 0 15px rgba(126, 211, 33, 0.5);
}
.radar-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgba(126, 211, 33, 0.2);
  z-index: 1;
}
.radar-pulse::before,
.radar-pulse::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  border: 1px solid var(--color-primary);
  animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.radar-pulse::after {
  animation-delay: 1s;
}

@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

/* =========================================
   Blog Image Styles (Cards & Hero)
   ========================================= */

.blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Ensure image respects border-radius */
  padding: 0; /* Remove padding from card itself, apply to body */
}

.blog-card__image-wrapper {
  width: 100%;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9; /* Ensure 16:9 ratio */
  border-bottom: 1px solid var(--color-border);
}

.blog-card__image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.blog-card:hover .blog-card__image-wrapper img {
  transform: scale(1.05); /* Slight zoom on hover for premium feel */
}

/* Padding is set on .blog-card__body further down (Blog Index Page Styles) to avoid two competing values */
.blog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Blog Detail Page Hero Image */
.blog-hero-image-wrapper {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-2xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  aspect-ratio: 16 / 9;
}

.blog-hero-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



/* PRELOADER STYLES */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Premium radial gradient background - made slightly more visible */
  background: radial-gradient(circle at center, #152516 0%, #050705 100%);
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.8s cubic-bezier(0.86, 0, 0.07, 1), visibility 0.8s ease-out;
}

.preloader::before {
  /* Subtle tech grid overlay - made stronger */
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(126, 211, 33, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 211, 33, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.8;
  z-index: 1;
}

.preloader.fade-out {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.05); /* Slight zoom out when fading */
}

.preloader-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  z-index: 2;
}

.preloader-logo-wrapper {
  position: relative;
  display: inline-block;
  padding: 1rem;
}

.preloader-logo-wrapper::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 250px; 
  height: 250px;
  background-color: var(--color-primary, #7ED321);
  border-radius: 50%;
  filter: blur(70px); 
  z-index: 1;
  opacity: 0; 
}

.preloader.is-active .preloader-logo-wrapper::after {
  animation: glow-pulse 2s infinite ease-in-out !important;
  animation-duration: 2s !important;
  animation-iteration-count: infinite !important;
}

.preloader-logo-wrapper img {
  height: 250px; 
  width: auto;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: scale(0.5);
}

.preloader.is-active .preloader-logo-wrapper img {
  animation: logo-entrance 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, logo-throb 2s infinite ease-in-out 1.2s !important;
  animation-duration: 1.2s, 2s !important;
  animation-iteration-count: 1, infinite !important;
}

.preloader-text {
  font-family: 'Inter', sans-serif;
  color: #ffffff;
  font-size: 1.1rem;
  letter-spacing: 8px; /* Start wide */
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.6;
  opacity: 0;
  text-shadow: 0 0 10px rgba(126, 211, 33, 0.3);
}

.preloader.is-active .preloader-text {
  animation: text-entrance 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s forwards !important;
  animation-duration: 1.2s !important;
  animation-iteration-count: 1 !important;
}

/* Animations */
@keyframes glow-pulse {
  0% {
    opacity: 0.35;
    transform: translate(-50%, -50%) scale(0.9);
  }
  50% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1.08);
  }
  100% {
    opacity: 0.35;
    transform: translate(-50%, -50%) scale(0.9);
  }
}

@keyframes logo-entrance {
  to { 
    opacity: 1; 
    transform: scale(1);
    filter: drop-shadow(0 0 15px rgba(126, 211, 33,0.6));
  }
}

@keyframes logo-throb {
  0% { 
    transform: scale(1); 
    filter: drop-shadow(0 0 15px rgba(126, 211, 33,0.6)) drop-shadow(0 0 30px rgba(126, 211, 33,0.4));
  }
  50% { 
    transform: scale(1.08); 
    filter: drop-shadow(0 0 25px rgba(126, 211, 33,1)) drop-shadow(0 0 60px rgba(126, 211, 33,0.8));
  }
  100% { 
    transform: scale(1); 
    filter: drop-shadow(0 0 15px rgba(126, 211, 33,0.6)) drop-shadow(0 0 30px rgba(126, 211, 33,0.4));
  }
}

@keyframes text-entrance {
  to { 
    opacity: 0.9; 
    letter-spacing: 3px; 
    transform: translateY(0);
    text-shadow: 0 0 20px rgba(126, 211, 33, 0.6);
  }
}

/* Prevent scrolling while preloader is active */
body.no-scroll {
  overflow: hidden;
}

/* ==========================================================================
   BLOG ARTICLE STYLES (Migrated from inline - do not duplicate in HTML)
   ========================================================================== */
.blog-article-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-4xl) 0;
}
.blog-title {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-sm);
    line-height: 1.2;
}
.blog-meta {
    color: var(--color-text-tertiary);
    font-size: var(--text-sm);
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}
.blog-body h2 {
    font-size: var(--text-2xl);
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-md);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
}
.blog-body h2 svg {
    color: var(--color-primary);
    flex-shrink: 0;
}
.blog-body h3 {
    font-size: var(--text-xl);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-sm);
    color: var(--color-text-primary);
}
.blog-body p {
    margin-bottom: var(--space-md);
    line-height: 1.8;
}
.blog-body ul {
    margin-bottom: var(--space-md);
    padding-left: var(--space-lg);
    color: var(--color-text-secondary);
}
.blog-body li {
    margin-bottom: var(--space-xs);
    line-height: 1.6;
}
ol.custom-list {
    list-style: none;
    padding: 0;
    margin: var(--space-lg) 0;
    counter-reset: custom-counter;
}
ol.custom-list li {
    position: relative;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    padding: var(--space-md) var(--space-md) var(--space-md) 60px;
    margin-bottom: var(--space-md);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    transition: all 0.3s ease;
}
ol.custom-list li:hover {
    border-color: var(--color-primary);
    transform: translateX(5px);
}
ol.custom-list li::before {
    counter-increment: custom-counter;
    content: counter(custom-counter);
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-primary);
    opacity: 1;
}
ol.custom-list li strong {
    color: var(--color-text-primary);
    display: block;
    margin-bottom: 5px;
}
.expert-opinion-box {
    background: var(--color-bg-card);
    border-left: 4px solid var(--color-primary);
    padding: var(--space-lg);
    margin: var(--space-xl) 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    position: relative;
}
.expert-opinion-box::after {
    content: '"';
    position: absolute;
    top: -10px;
    right: 20px;
    font-size: 80px;
    color: var(--color-border);
    font-family: serif;
    opacity: 0.3;
}
/* Scoped to the box (0,2,0) so it beats `.blog-body h3` (0,1,1) — the
   expert heading is an h3 now for correct h2→h3 hierarchy, and without this
   the generic h3 rule would repaint it white and push it down. */
.expert-opinion-box .expert-title {
    color: var(--color-primary);
    margin-top: 0;
    margin-bottom: var(--space-xs);
    font-size: var(--text-lg);
    display: flex;
    align-items: center;
    gap: 8px;
}
.table-of-contents {
    background: var(--color-bg-secondary);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-2xl);
    border: 1px solid var(--color-border);
}
.toc-title {
    font-size: var(--text-xl);
    margin-bottom: var(--space-md);
}
.toc-list {
    list-style: decimal inside;
    padding: 0;
    margin: 0;
}
.toc-list li {
    margin-bottom: var(--space-xs);
    color: var(--color-primary);
    font-weight: 600;
}
.toc-list a {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-weight: 400;
    transition: color var(--transition-fast);
}
.toc-list a:hover {
    color: var(--color-primary);
}
.faq-item {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}
.faq-question {
    font-size: var(--text-lg);
    margin-bottom: var(--space-sm);
}
.faq-answer {
    color: var(--color-text-secondary);
}
.key-takeaways {
    background: var(--color-bg-secondary);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    margin: var(--space-lg) 0;
    border: 1px solid var(--color-border);
}
.key-takeaways h3 {
    color: var(--color-primary);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.related-posts {
    margin-top: var(--space-4xl);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-2xl);
}
.related-posts a {
    color: var(--color-primary);
    text-decoration: none;
}
.related-posts a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   BLOG INDEX PAGE STYLES (Migrated from inline)
   ========================================================================== */
.blog-header-section {
  padding: var(--space-4xl) 0 var(--space-2xl);
  text-align: center;
  background: linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%);
}
.blog-header-section h1 {
  font-size: var(--text-5xl);
  margin-bottom: var(--space-md);
}
.blog-header-section p {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-xl);
  padding: var(--space-xl) 0 var(--space-4xl);
}
.blog-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-base);
  display: flex;
  flex-direction: column;
}
.blog-card:hover {
  transform: translateY(-8px);
  border-color: var(--color-border-active);
  box-shadow: var(--shadow-glow);
}
.blog-card__body {
  padding: var(--space-lg);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.blog-card__category {
  font-size: var(--text-xs);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin-bottom: var(--space-xs);
}
.blog-card__title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}
.blog-card__title a {
  color: var(--color-text-primary);
  text-decoration: none;
}
.blog-card__title a:hover {
  color: var(--color-primary);
}
.blog-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
  flex-grow: 1;
}
.blog-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-sm);
}

/* ===== 9. Go-live / mobile fixes ===== */

/* .blog-article-wrapper { padding: X 0 } was wiping .container's side padding
   (same specificity, later in file) — restore the horizontal padding. */
.blog-article-wrapper {
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Mobile menu: scrollable on short phones (iPhone SE / landscape), safely
   centered when it fits, real scroll-lock, and out of the tab order when
   closed (opacity:0 alone left 10 invisible focusable links). */
.mobile-menu {
  justify-content: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: calc(var(--header-height) + 1rem) 1.25rem calc(2rem + env(safe-area-inset-bottom, 0px));
  visibility: hidden;
  transition: opacity var(--transition-base), visibility 0s linear var(--transition-base);
}

.mobile-menu.active {
  visibility: visible;
  transition: opacity var(--transition-base), visibility 0s;
}

.mobile-menu > nav {
  margin: auto 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mobile-menu__links a {
  display: inline-block;
  padding: 0.35rem 0.75rem;
}

@media (max-height: 700px) {
  .mobile-menu__links { gap: 1.1rem; }
  .mobile-menu__links a { font-size: var(--text-xl); }
  .mobile-menu .btn-primary { margin-top: 1.25rem; }
}

body.menu-open {
  overflow: hidden;
}

/* 320px-wide phones: nothing may force the page wider than the viewport */
.brand-strip__list li,
.brand-strip__link {
  min-width: 0;
}

.brand-strip__name,
.brand-strip__cat {
  overflow-wrap: anywhere;
}

@media (max-width: 479px) {
  .brand-strip__list {
    grid-template-columns: 1fr;
  }
}

.blog-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}

/* Fixed WhatsApp button must not cover the footer's last row on phones */
@media (max-width: 639px) {
  .site-footer {
    padding-bottom: calc(2rem + 76px);
  }
  .whatsapp-float {
    right: 1.25rem;
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Tap targets (>= ~44px pitch) for small text links */
.site-footer__links a,
.site-footer__bottom-links a,
.toc-list a {
  display: inline-block;
  padding: 0.3rem 0;
}

.site-footer__social a {
  width: 44px;
  height: 44px;
}

/* Preloader logo was clipped on 320px phones */
.preloader-logo-wrapper img {
  width: min(250px, 70vw);
  height: auto;
}

/* No-JS safety net: scroll-reveal must never leave content invisible
   (html.no-js is removed by an inline script in <head> when JS runs). */
html.no-js .fade-in,
html.no-js .results__item {
  opacity: 1;
  transform: none;
}

/* ===== 10. Accessibility fixes ===== */

/* Form fields: visible boundary (>= 3:1) and a real focus ring — the base rule
   had a 1.15:1 border and outline:none. */
.form-control {
  border-color: rgba(255, 255, 255, 0.3);
}

.form-control:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* WhatsApp green (#25D366) with white text was 1.98:1; dark text reads at
   ~10:1 and matches the site's own green primary buttons. */
.whatsapp-float,
.btn-whatsapp {
  color: #0a0a0a;
}

.whatsapp-float__icon,
.btn-whatsapp svg {
  fill: currentColor;
}

/* Programmatic focus on scroll targets (skip link / TOC) — no giant ring */
[tabindex="-1"]:focus {
  outline: none;
}

.form-hint {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: 1rem;
}

/* keep the previous look after the heading-level changes */
.site-footer__title {
  line-height: 1.5;
}

.blog-card__title {
  font-weight: 600;
  letter-spacing: 0;
}

/* hover rule earlier in the file re-set the WhatsApp button text to white */
.btn-whatsapp:hover,
.btn-whatsapp:focus-visible {
  color: #0a0a0a;
}

/* ===== 11. Tech-stack canlandirma ===== */

/* Taşma düzeltmesi: 32px'lik kutu ikonlar içindi ama metin etiketleri de
   <span> olduğu için "Google Analytics" gibi uzun yazılar pencerenin dışına
   taşıyordu. Etiketler artık serbest genişlikte. */
.tech-stack__logo span {
  width: auto;
  height: auto;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

.tech-stack__logo {
  position: relative;
  overflow: hidden;
  justify-content: center;
  min-height: 64px;
  padding: 1rem 1.25rem;
  border-color: var(--color-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
  animation: techFloat 6s ease-in-out infinite;
}

/* hafif faz farkı — kartlar aynı anda değil dalga gibi salınır */
.tech-stack__logo:nth-child(3n) { animation-delay: 1s; }
.tech-stack__logo:nth-child(3n + 1) { animation-delay: 2s; }
.tech-stack__logo:nth-child(2n) { animation-duration: 7s; }

@keyframes techFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* üstten geçen ince ışık süpürmesi */
.tech-stack__logo::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(126, 211, 33, 0.08), rgba(0, 194, 255, 0.10), transparent);
  transform: skewX(-18deg);
  animation: techShine 7s ease-in-out infinite;
  pointer-events: none;
}

.tech-stack__logo:nth-child(4n)::after { animation-delay: 1.7s; }
.tech-stack__logo:nth-child(4n + 2)::after { animation-delay: 3.4s; }
.tech-stack__logo:nth-child(4n + 3)::after { animation-delay: 5.1s; }

@keyframes techShine {
  0%, 55% { left: -80%; }
  75%, 100% { left: 130%; }
}

.tech-stack__logo:hover {
  border-color: rgba(126, 211, 33, 0.55);
  background: linear-gradient(180deg, rgba(126, 211, 33, 0.10), rgba(0, 194, 255, 0.05));
  box-shadow: 0 6px 22px rgba(126, 211, 33, 0.16);
  transform: translateY(-4px);
  animation-play-state: paused;
}

.tech-stack__logo:hover span {
  color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
  .tech-stack__logo,
  .tech-stack__logo::after {
    animation: none;
  }
}

/* Mobil/CLS düzeltmesi: footer logosuna width/height öznitelikleri eklendiğinde
   CSS yalnızca yüksekliği (36px) sabitliyordu; genişlik 40px'te kalıp logoyu
   hafifçe eziyordu. Oranı koru. */
.site-footer__logo img {
  width: auto;
}

/* ===== 12. Mobil efekt yerleşimi (canlıda telefonda görülen sorunlar) =====
   Üç WebGL efekti masaüstü düzenine göre konumlanmıştı; telefonda:
   - hero dünyası hiç yoktu (sütun gizliydi), yerine imleç izi görünüyordu,
   - final CTA dünyası yazının tam arkasına düşüp okunurluğu bozuyordu,
   - footer dünyası logo/metin sütununun arkasına giriyordu.
   Dar ekranda efektler metnin ARKASINA değil, metnin altına/üstüne ayrı bir
   bant olarak yerleşir; böylece hem görünür hem de yazıyı bozmaz. */

@media (max-width: 1023.98px) {
  /* Hero: dünya, metin ve düğmelerin altında ayrı bir blok olarak görünür */
  .hero__visual {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: -0.5rem;
  }
  .hero-globe-canvas {
    width: min(300px, 76vw);
    height: min(300px, 76vw);
  }
}

@media (max-width: 767.98px) {
  /* Final CTA: dünya, içeriğin arkasından çıkıp altına iner */
  .final-cta {
    display: flex;
    flex-direction: column;
    padding-bottom: 1.5rem;
  }
  .final-cta > .container {
    order: 1;
  }
  .final-cta .planet-fx-canvas {
    position: relative;
    inset: auto;
    order: 2;
    width: 100%;
    height: 300px;
    margin-top: 1.5rem;
    opacity: 1;
  }
  .final-cta::before {
    display: none;
  }

  /* Footer: dünya, sütunların üstünde kendi bandında; metnin arkasına girmez */
  .footer-globe-canvas {
    position: relative;
    top: auto;
    left: auto;
    height: 220px;
    margin: -2rem 0 1rem;
    opacity: 0.85;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
  }
}

/* ===== 13. Dokunmatik imleç izi (telefon/tablet) =====
   Masaüstünde iz her zaman görünür. Dokunmatikte yalnızca parmak ekrandayken
   görünür: parmak kalkınca yumuşakça söner (JS ardından tuvali display:none
   yapıp kütüphanenin kendi gözlemcisiyle çizimi durdurur). */
.cursor-fx-wrapper--touch {
  opacity: 0;
  transition: opacity 0.45s ease;
}

.cursor-fx-wrapper--touch.is-active {
  opacity: 1;
  transition-duration: 0.12s;
}