/* ==========================================================================
   IRONMAN CONSULTING — PREMIUM STYLESHEET
   Faithful to Figma Design: Deep Burgundy/Dark, Premium Corporate
   ========================================================================== */

/* --- Custom Scrollbar --- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
  background: #700b19;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #901224;
}

/* --- Theme Variables --- */
:root {
  --color-primary: #700b19;
  --color-primary-rgb: 112, 11, 25;
  --color-primary-light: #a01020;
  --color-primary-glow: rgba(160, 16, 32, 0.25);
  --color-btn: #f97316;
  --color-btn-hover: #fb923c;
  --color-btn-glow: rgba(249, 115, 22, 0.35);
  --color-secondary: #e5e5e5;
  /* Unified surfaces — one light, one maroon-signature */
  --surface-light: radial-gradient(ellipse at 50% 30%, #ffffff 0%, #eef0f2 45%, #dadde1 100%);
  --surface-maroon: radial-gradient(ellipse at 50% 30%, #700b19 0%, #4a0712 45%, #1a0006 100%);
  --surface-maroon-light: radial-gradient(ellipse at 50% 30%, #a01a2c 0%, #6a0f1c 45%, #2c0509 100%);
  /* Brand burgundy flowing into the action orange */
  --accent-gradient: linear-gradient(135deg, #a01020 0%, #f97316 100%);
  --card-bg: #ffffff;
  --card-border: #e6e8ec;
  --on-light-heading: #1a1416;
  --on-light-body: #4a4145;
  --on-light-muted: #6a6266;
  --color-bg-dark: #0e0c0d;
  --color-bg-section: #110e0f;
  --color-bg-card: rgba(255, 255, 255, 0.03);
  --color-bg-card-solid: #151213;
  --color-text-light: #ffffff;
  --color-text-muted: #8a7f82;
  --color-text-dim: #5c5456;
  --color-border: rgba(255, 255, 255, 0.06);
  --font-main: "Google Sans Flex", "Google Sans", "Plus Jakarta Sans", "Outfit", system-ui, -apple-system, sans-serif;
  --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.2s ease;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
}

/* --- Base & Reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-main);
  background-color: var(--color-bg-dark);
  background: linear-gradient(180deg, #1a0a0e 0%, #0e0c0d 15%, #0e0c0d 100%);
  color: var(--color-text-light);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

img {
  max-width: 100%;
  display: block;
}

/* --- Typography --- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

p {
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.section-label {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.7rem;
  font-weight: 600;
  color: #d9d1d3;
  margin-bottom: 12px;
}

/* --- Glassmorphism & Cards --- */
.glass-header {
  background: #ffffff;
  border-bottom: 1px solid #e8e8e8;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

.glass-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: var(--transition-smooth);
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(112, 11, 25, 0.3);
  box-shadow: 0 8px 30px rgba(112, 11, 25, 0.08);
}

/* --- Premium Buttons --- */
.btn-premium {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-btn);
  color: #fff;
  padding: 12px 28px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.btn-premium:hover {
  background: var(--color-btn-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px var(--color-btn-glow);
}

.btn-premium-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--color-text-light);
  padding: 12px 28px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: var(--transition-smooth);
}

.btn-premium-outline:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--color-btn);
}

/* --- Section Layout --- */
.sec {
  padding: 100px 0;
  position: relative;
}

.sec--dark {
  background: var(--color-bg-section);
}

.sec--gradient {
  background: linear-gradient(180deg, var(--color-bg-dark) 0%, #150d0f 50%, var(--color-bg-dark) 100%);
}

.sec--solutions {
  background: var(--surface-light);
}

/* Industries — lighter maroon radial (distinct from the deeper Insights signature) */
#industries {
  background: var(--surface-maroon-light);
}

/* Insights — the deeper maroon-signature section */
#insights {
  background: var(--surface-maroon);
}

/* "View All Insights" link needs contrast on the maroon background */
#insights .solution-link {
  color: #fdba74;
}

#insights .solution-link:hover {
  color: #ffffff;
}

/* Light section header text on the lighter Core Solutions background */
.sec--solutions .section-label {
  color: var(--color-primary);
}

.sec--solutions h2 {
  color: #1a1416;
}

.sec--solutions > .container > .row p {
  color: #4a4145;
}

/* ==========================================================================
   HEADER / NAVBAR — white header, dark text
   ========================================================================== */
.navbar-brand img {
  border-radius: 4px;
}

.navbar .nav-link {
  font-size: 0.88rem;
  font-weight: 500;
  color: #555 !important;
  transition: var(--transition-fast);
}

/* Wider, less cramped spacing between menu items (~2x) */
@media (min-width: 992px) {
  .glass-header .navbar-nav {
    gap: 0.6rem !important;
  }

  .glass-header .navbar-nav .nav-link:not(.btn-premium) {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--color-primary) !important;
}

.navbar .nav-link.btn-premium,
.navbar .nav-link.btn-premium:hover {
  color: #ffffff !important;
}

.glass-header .nav-lang {
  flex-shrink: 0;
}

@media (min-width: 992px) {
  .glass-header .nav-lang {
    margin-left: 1.15rem !important;
  }

  .glass-header .nav-lang-toggle {
    min-width: 4.4rem;
  }
}

/* Primary CTAs stay brand maroon — navbar, section CTA, case-studies button */
.navbar .nav-link.btn-premium,
.hero-sec .btn-premium,
.cta-sec .btn-premium,
#case-studies .btn-premium,
#cs-list .btn-premium,
.page-contact .contact-form-card .btn-premium {
  background: var(--color-primary);
}

.navbar .nav-link.btn-premium:hover,
.hero-sec .btn-premium:hover,
.cta-sec .btn-premium:hover,
#case-studies .btn-premium:hover,
#cs-list .btn-premium:hover,
.page-contact .contact-form-card .btn-premium:hover {
  background: var(--color-primary-light);
  box-shadow: 0 4px 20px var(--color-primary-glow);
}

/* --- Dropdown panels --- */
.nav-dropdown {
  background: #ffffff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12) !important;
  padding: 8px !important;
  min-width: 280px !important;
  margin-top: 8px !important;
}

.nav-dropdown-sm {
  min-width: 160px !important;
}

/* Desktop: open submenus on hover, so parent items that link somewhere
   (e.g. Learning) stay clickable. The 8px margin-top would break the hover
   chain, so the bridge below keeps the pointer inside the trigger area. */
@media (min-width: 992px) {
  .navbar .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
  }

  .navbar .nav-item.dropdown > .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
  }
}

.nav-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #444 !important;
  white-space: nowrap;
  transition: var(--transition-fast);
}

.nav-dropdown .dropdown-item .dd-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: #f5f0f1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 0.78rem;
  transition: var(--transition-fast);
}

.nav-dropdown .dropdown-item:hover {
  background: #fdf4f5 !important;
  color: var(--color-primary) !important;
}

.nav-dropdown .dropdown-item:hover .dd-icon {
  background: var(--color-primary);
  color: #fff;
}

.nav-dropdown .dropdown-item.active {
  background: #fdf4f5 !important;
  color: var(--color-primary) !important;
}

.nav-dropdown .dropdown-item.active .dd-icon {
  background: var(--color-primary);
  color: #fff;
}

.nav-dropdown .dropdown-divider {
  border-color: #f0f0f0;
  margin: 6px 0;
}

.nav-dropdown .dd-section-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #aaa;
  padding: 8px 12px 4px;
}

/* ==========================================================================
   HERO SECTION — matches Figma: deep dark bg, left text, right dashboard card
   ========================================================================== */
.hero-sec {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 60px;
  position: relative;
  overflow: hidden;
  background: #1a0003 url('../images/hero-poster.webp') center / cover no-repeat;
}

.hero-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgb(150 2 2 / 73%) 0%, rgb(43 0 6 / 90%) 55%, rgb(26 0 3) 100%);
  z-index: 1;
  pointer-events: none;
}

.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 1;
}

@media (max-width: 991.98px) {
  .hero-video-bg {
    display: none;
  }
}

.hero-sec .container {
  position: relative;
  z-index: 2;
}

.hero-sec h1 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  margin-bottom: 1.2rem;
  white-space: nowrap;
}

.hero-sec h1 .text-gradient {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sec p {
  color: #bbb8b9;
}

/* Hero Showcase Slider — right side of hero (dashboard screenshots) */
.hero-showcase {
  background: #1a0004a3;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: var(--radius-lg);
  padding: 14px;
  position: relative;
  overflow: hidden;
}

.hero-showcase::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light), transparent);
}

.hero-showcase-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.hero-showcase-head h5 {
  font-size: 0.85rem;
  font-weight: 600;
}

.showcase-frame {
  border-radius: 12px;
  overflow: hidden;
  background: #0d0d12;
  border: 1px solid rgb(255 255 255 / 12%);
  box-shadow: 0 18px 40px rgb(0 0 0 / 45%);
}

.showcase-topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: #15151c;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
}

.showcase-topbar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff5f57;
}

.showcase-topbar span:nth-child(2) {
  background: #febc2e;
}

.showcase-topbar span:nth-child(3) {
  background: #28c840;
}

.showcase-title {
  margin-left: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #f2f2f4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.showcase-swiper {
  width: 100%;
  position: relative;
}

.showcase-swiper .swiper-slide {
  aspect-ratio: 16 / 10;
  background: #ffffff;
  overflow: hidden;
}

.showcase-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.showcase-pagination {
  position: absolute;
  bottom: 10px !important;
  left: 50% !important;
  transform: translateX(-50%);
  width: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgb(26 0 4 / 65%);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  z-index: 5;
}

.showcase-pagination .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  margin: 0 !important;
  background: #ffffff;
  opacity: 0.55;
  transition: all 0.3s ease;
}

.showcase-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  width: 20px;
  border-radius: 4px;
  background: var(--color-primary-light);
}

/* Dashboard Card — right side of hero */
.dashboard-card {
  background: #1a0004a3;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: var(--radius-lg);
  padding: 28px;
  position: relative;
  overflow: hidden;
}

.dashboard-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light), transparent);
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.dashboard-header h5 {
  font-size: 0.85rem;
  font-weight: 600;
}

.badge-live {
  background: rgba(220, 38, 38, 0.15);
  color: #ef4444;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}

.badge-live::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #ef4444;
  border-radius: 50%;
  animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

.dashboard-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
}

.dash-stat-item {
  flex: 1;
}

.dash-stat-label {
  font-size: 0.7rem;
  color: #ffffff;
  margin-bottom: 4px;
}

.dash-stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
}

.dash-stat-value.positive {
  color: #b1bf81;
}

.dashboard-bars-label {
  font-size: 0.7rem;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 14px;
}

/* Solution Bars in Dashboard */
.solution-bar-container {
  margin-bottom: 14px;
}

.solution-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  margin-bottom: 5px;
  color: #ffffff;
}

.solution-bar-bg {
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
}

.solution-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
  border-radius: 2px;
  transition: width 1.5s cubic-bezier(0.1, 1, 0.1, 1);
}

/* Hero Stats Row */
.hero-stats-row {
  display: flex;
  gap: 40px;
  margin-top: 40px;
}

.hero-stat {
  text-align: left;
}

.hero-stat .stat-num {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-text-light);
  line-height: 1;
}

.hero-stat .stat-label {
  font-size: 0.8rem;
  color: #bbb8b9;
  margin-top: 4px;
}

/* ==========================================================================
   CLIENTS / REFERANSLAR LOGO CAROUSEL — White background
   ========================================================================== */
.clients-sec {
  padding: 60px 0;
  background: #ffffff;
  border-top: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
  overflow: hidden;
}

.clients-sec .section-label {
  color: var(--color-primary);
}

.clients-header {
  text-align: center;
  margin-bottom: 36px;
}

.clients-headline {
  font-size: 1.05rem;
  font-weight: 600;
  color: #323232;
  margin: 4px 0 0;
}

.clients-swiper {
  padding: 6px 52px;
}

.client-logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  padding: 16px 22px;
  background: #ffffff;
  border: 1px solid #ebebeb;
  border-radius: var(--radius-sm);
  transition: var(--transition-smooth);
}

.client-logo-box:hover {
  background: #ffffff;
  border-color: rgba(112, 11, 25, 0.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.client-logo-box img {
  max-height: 74px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

.clients-btn-prev,
.clients-btn-next {
  color: var(--color-primary) !important;
  background: #ffffff !important;
  border: 1px solid #d8d8d8 !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.clients-btn-prev::after,
.clients-btn-next::after {
  font-size: 0.8rem !important;
}

/* ==========================================================================
   CORE SOLUTIONS — 6 cards with image thumbnails (3x2 grid)
   ========================================================================== */
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 991px) {
  .solutions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .solutions-grid {
    grid-template-columns: 1fr;
  }
}

.solution-card-v2 {
  background: #ffffff;
  border: 1px solid #e6e8ec;
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition-smooth);
}

.solution-card-v2:has(a[href]):hover {
  transform: translateY(-4px);
  border-color: rgba(112, 11, 25, 0.3);
  box-shadow: 0 12px 40px rgba(20, 16, 18, 0.12);
}

.solution-card-v2 .card-img {
  height: 180px;
  overflow: hidden;
  position: relative;
}

.solution-card-v2 .card-img img,
.solution-card-v2 .card-img .img-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.solution-card-v2:has(a[href]):hover .card-img img,
.solution-card-v2:has(a[href]):hover .card-img .img-placeholder {
  transform: scale(1.05);
}

.img-placeholder {
  background: linear-gradient(135deg, rgba(112, 11, 25, 0.2) 0%, rgba(20, 15, 17, 1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-placeholder i {
  font-size: 2.5rem;
  color: rgba(112, 11, 25, 0.5);
}

.solution-card-v2 .card-body {
  padding: 32px 28px;
}

.solution-card-v2 .card-body h4 {
  font-size: 1.05rem;
  margin-bottom: 10px;
  color: #1a1416;
}

.solution-card-v2 .card-body p {
  font-size: 0.85rem;
  margin-bottom: 16px;
  color: #6a6266;
  line-height: 1.5;
}

.solution-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-primary-light);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  transition: var(--transition-fast);
}

.solution-link:hover {
  color: var(--color-btn);
}

.solution-link i {
  transition: transform 0.2s ease;
}

.solution-link:hover i {
  transform: translateX(3px);
}

/* ==========================================================================
   INDUSTRIES WE SERVE — icon cards on dark background
   ========================================================================== */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 991px) {
  .industries-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .industries-grid {
    grid-template-columns: 1fr;
  }
}

.industry-icon-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 22px 20px;
  transition: var(--transition-smooth);
}


.industry-icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(112, 11, 25, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--color-primary-light);
  font-size: 1rem;
  transition: var(--transition-smooth);
}


.industry-icon-card h4 {
  font-size: 1rem;
  margin-bottom: 6px;
  color: var(--on-light-heading);
}

.industry-icon-card p {
  font-size: 0.82rem;
  color: var(--on-light-muted);
  line-height: 1.5;
}

/* ==========================================================================
   TRANSFORMATION OUTCOMES — Big red stat cards
   ========================================================================== */
.outcomes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 991px) {
  .outcomes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .outcomes-grid {
    grid-template-columns: 1fr;
  }
}

.outcome-stat-card {
  background: rgba(112, 11, 25, 0.1);
  border: 1px solid rgba(112, 11, 25, 0.2);
  border-radius: var(--radius-md);
  padding: 30px 24px;
  text-align: center;
  transition: var(--transition-smooth);
}

.outcome-stat-card:hover {
  background: rgba(112, 11, 25, 0.18);
  border-color: rgba(112, 11, 25, 0.4);
  transform: translateY(-2px);
}

.outcome-stat-card .big-stat {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--color-primary-light);
  line-height: 1;
  margin-bottom: 8px;
}

.outcome-stat-card .big-stat .arrow {
  font-size: 1.6rem;
}

.outcome-stat-card .stat-desc {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

/* ==========================================================================
   CASE STUDY — Single card layout: left text + right stats/bars
   ========================================================================== */
/* Case Studies — unified light surface */
#case-studies {
  background: var(--surface-light);
}

#case-studies .section-label {
  color: var(--color-primary);
}

#case-studies h2 {
  color: #1a1416;
}

.case-study-card {
  background: #ffffff;
  border: 1px solid #e6e8ec;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.case-study-body {
  padding: 40px;
}

.case-study-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  margin-bottom: 16px;
}

.case-study-body h3 {
  font-size: 1.8rem;
  margin-bottom: 16px;
  color: var(--color-text-light);
}

.case-study-body>p {
  font-size: 0.9rem;
  margin-bottom: 24px;
  color: #4a4145;
}

.case-bullet {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

.case-bullet .bullet-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(112, 11, 25, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.case-bullet .bullet-icon i {
  font-size: 0.5rem;
  color: var(--color-primary-light);
}

.case-bullet-text h5 {
  font-size: 0.9rem;
  margin-bottom: 2px;
  color: #1a1416;
}

.case-bullet-text p {
  font-size: 0.8rem;
  color: #6a6266;
  margin: 0;
}

/* Case study right stats panel */
.case-stats-panel {
  padding: 40px;
}

.case-big-stats {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
}

.case-big-stat .val {
  font-size: 2.8rem;
  font-weight: 700;
  color: #1a1416;
  line-height: 1;
}

.case-big-stat .lbl {
  font-size: 0.78rem;
  color: #6a6266;
  margin-top: 4px;
}

/* Progress bars in case study */
.case-progress-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #9a9296;
  margin-bottom: 16px;
}

.case-bar-item {
  margin-bottom: 16px;
}

.case-bar-item .bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  margin-bottom: 6px;
  color: #6a6266;
}

.case-bar-item .bar-label span:last-child {
  color: #1a1416;
  font-weight: 600;
}

.case-bar-bg {
  height: 6px;
  background: #e6e8ec;
  border-radius: 3px;
  overflow: hidden;
}

.case-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
  border-radius: 3px;
  transition: width 1.5s cubic-bezier(0.1, 1, 0.1, 1);
}

/* ==========================================================================
   CASE STUDIES — 2 static cards side by side
   ========================================================================== */
.case-study-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: stretch;
}

.case-study-grid .case-study-card {
  height: 100%;
  display: flex;
}

.case-study-grid .case-study-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

/* Push the CTA to the bottom so both cards line up */
.case-study-grid .case-study-body > .btn-premium {
  margin-top: auto;
}

@media (max-width: 991px) {
  .case-study-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   INSIGHTS / BLOG SECTION
   ========================================================================== */
.blog-card-v2 {
  background: #ffffff;
  border: 1px solid #e6e8ec;
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition-smooth);
}

.blog-card-link:hover .blog-card-v2 {
  transform: translateY(-4px);
  border-color: rgba(112, 11, 25, 0.25);
  box-shadow: 0 8px 30px rgba(20, 16, 18, 0.15);
}

.blog-card-v2 .blog-top-bar {
  height: 4px;
  background: var(--color-primary);
}

.blog-card-v2 .blog-top-bar.bar-blue {
  background: #3b82f6;
}

.blog-card-v2 .blog-top-bar.bar-green {
  background: #22c55e;
}

.blog-card-v2 .blog-top-bar.bar-red {
  background: var(--color-primary);
}

.blog-card-v2 .blog-img-wrap {
  height: 180px;
  overflow: hidden;
}

.blog-card-v2 .blog-img-wrap img,
.blog-card-v2 .blog-img-wrap .img-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.blog-card-link:hover .blog-card-v2 .blog-img-wrap img,
.blog-card-link:hover .blog-card-v2 .blog-img-wrap .img-placeholder {
  transform: scale(1.05);
}

.blog-card-v2 .blog-body-v2 {
  padding: 22px;
}

.blog-card-v2 .blog-category {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary-light);
  margin-bottom: 10px;
}

.blog-card-v2 .blog-category.cat-blue {
  color: #2563eb;
}

.blog-card-v2 .blog-category.cat-green {
  color: #16a34a;
}

.blog-card-v2 h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.35;
  color: #1a1416;
}

.blog-card-v2 .blog-body-v2 p {
  font-size: 0.82rem;
  margin-bottom: 14px;
  color: #6a6266;
}

.blog-card-v2 .blog-meta-v2 {
  font-size: 0.75rem;
  color: #9a9296;
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Case study cards — insight card shell carrying capability bullets */
/* Tinted backdrop so the image slot reads as intentional while it loads */
.blog-card-v2.case-card .blog-img-wrap {
  background: linear-gradient(135deg, rgba(112, 11, 25, 0.10), rgba(20, 15, 17, 0.06));
}

.blog-card-v2.case-card .blog-body-v2 > p {
  margin-bottom: 18px;
}

.blog-card-v2.case-card .case-bullet-text h5 {
  font-size: 0.85rem;
  margin-bottom: 2px;
  color: #1a1416;
}

.blog-card-v2.case-card .case-bullet-text p {
  font-size: 0.78rem;
  color: #6a6266;
  margin: 0;
}

/* Pin the date row to the card foot so it lines up across the row */
.blog-card-v2.case-card {
  display: flex;
  flex-direction: column;
}

.blog-card-v2.case-card .blog-body-v2 {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card-v2.case-card .blog-meta-v2:last-child {
  margin-top: 0;
  padding-top: 10px;
}

.blog-card-v2 .blog-card-cta {
  margin-top: auto;
  align-self: flex-end;
  padding-top: 12px;
  font-size: 0.82rem;
}

/* ==========================================================================
   CTA SECTION — Bold heading with gradient text
   ========================================================================== */
.cta-sec {
  padding: 120px 0;
  text-align: center;
  background: var(--surface-light);
}

.cta-sec .section-label {
  color: var(--color-primary);
}

.cta-sec h2 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin-bottom: 20px;
  color: #1a1416;
}

.cta-sec h2 .text-gradient {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cta-sec p {
  max-width: 500px;
  margin: 0 auto 30px;
  font-size: 0.95rem;
  color: #4a4145;
}

/* ==========================================================================
   CONTACT FORM
   ========================================================================== */
.form-control-premium {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-light) !important;
  padding: 12px 16px;
  transition: var(--transition-fast);
  font-family: var(--font-main);
}

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

.form-control-premium:focus {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-glow);
  outline: none;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer {
  background: #080607;
  border-top: 1px solid var(--color-border);
  padding: 60px 0 24px;
  font-size: 0.85rem;
  color: var(--color-text-dim);
}

footer h5 {
  color: var(--color-text-light);
  margin-bottom: 16px;
  font-size: 0.9rem;
}

footer a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: var(--transition-fast);
}

footer a:hover {
  color: var(--color-primary-light);
}

.footer-info-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-light);
  margin: 14px 0 2px;
}

.footer-info-text {
  font-size: 0.8rem;
  line-height: 1.55;
  margin-bottom: 0;
}

.footer-bottom {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
  font-size: 0.78rem;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 991px) {
  .sec {
    padding: 70px 0;
  }

  .hero-sec {
    min-height: auto;
    padding-bottom: 60px;
    padding-top: 110px;
  }

  .hero-sec h1 {
    white-space: normal;
  }

  .hero-stats-row {
    gap: 24px;
  }

  .hero-stat .stat-num {
    font-size: 2rem;
  }

  .case-big-stat .val {
    font-size: 2rem;
  }

  .outcome-stat-card .big-stat {
    font-size: 2rem;
  }
}

@media (max-width: 575px) {
  .hero-stats-row {
    flex-direction: column;
    gap: 16px;
  }

  .dashboard-stats {
    flex-direction: column;
    gap: 12px;
  }

  .case-big-stats {
    flex-direction: column;
    gap: 16px;
  }
}

/* ==========================================================================
   KVKK COOKIE CONSENT BANNER (Dark Theme Adaptation)
   ========================================================================== */
#vc-consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 99999;
  font-family: var(--font-main);
  pointer-events: none;
}

.vc-banner,
.vc-overlay {
  pointer-events: auto;
}

.vc-banner {
  max-width: 980px;
  margin: 0 auto 20px;
  padding: 22px 24px;
  background: #ffffff;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: 0 16px 50px rgba(20, 16, 18, 0.35);
  display: none;
}

.vc-banner.vc-open {
  display: block;
  animation: vc-rise .35s ease both;
}

@keyframes vc-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .vc-banner.vc-open,
  .vc-modal.vc-open {
    animation: none;
  }
}

.vc-banner h2 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--on-light-heading);
}

.vc-banner p {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--on-light-body);
}

.vc-banner a {
  color: var(--color-primary);
  text-decoration: underline;
}

.vc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.vc-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 9px;
  transition: filter .15s ease;
}

.vc-btn:hover {
  filter: brightness(1.15);
}

.vc-btn:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.vc-btn-accept {
  background: var(--color-primary);
  color: #fff;
}

.vc-btn-reject {
  background: #f0f1f3;
  color: var(--on-light-heading);
}

.vc-btn-prefs {
  background: transparent;
  color: var(--on-light-body);
  text-decoration: underline;
  padding-left: 8px;
  padding-right: 8px;
}

.vc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 100000;
}

.vc-overlay.vc-open {
  display: flex;
}

.vc-modal {
  background: #ffffff;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  max-width: 560px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 16px 50px rgba(20, 16, 18, 0.35);
  padding: 26px;
}

.vc-modal.vc-open {
  animation: vc-rise .3s ease both;
}

.vc-modal h3 {
  margin: 0 0 4px;
  font-size: 18px;
  color: var(--on-light-heading);
}

.vc-modal>p {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--on-light-body);
  line-height: 1.5;
}

.vc-cat {
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
}

.vc-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vc-cat-head strong {
  font-size: 14px;
  color: var(--on-light-heading);
}

.vc-cat p {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--on-light-muted);
  line-height: 1.5;
}

.vc-cat .vc-always {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}

.vc-switch {
  position: relative;
  width: 44px;
  height: 24px;
  flex: none;
}

.vc-switch input {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  cursor: pointer;
  margin: 0;
}

.vc-slider {
  position: absolute;
  inset: 0;
  background: #cbd0d6;
  border-radius: 24px;
  transition: background .15s ease;
  pointer-events: none;
}

.vc-slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(20, 16, 18, 0.25);
  transition: transform .15s ease;
}

.vc-switch input:checked+.vc-slider {
  background: var(--color-primary);
}

.vc-switch input:checked+.vc-slider::before {
  transform: translateX(20px);
}

.vc-switch input:focus-visible+.vc-slider {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.vc-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

@media (max-width: 560px) {
  .vc-banner {
    margin: 0;
    border-radius: 14px 14px 0 0;
  }

  .vc-actions .vc-btn {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* ==========================================================================
   INNER PAGE HERO — compact hero for About, Contact, etc.
   ========================================================================== */
.page-hero {
  --hero-img: url('../images/banner2.webp');
  padding: 160px 0 80px;
  background: radial-gradient(ellipse at 60% 40%, rgba(112, 11, 25, 0.18) 0%, transparent 65%),
    radial-gradient(ellipse at 10% 80%, rgba(112, 11, 25, 0.08) 0%, transparent 50%),
    linear-gradient(90deg, rgba(14, 12, 13, 0.72) 0%, rgba(14, 12, 13, 0.45) 45%, rgba(14, 12, 13, 0.12) 100%),
    var(--hero-img) center / cover no-repeat;
}

/* Per-page hero imagery (banner2 stays on the About page via the default) */
.page-hero--pe { --hero-img: url('../images/hero-analytics.webp'); }
.page-hero--municipal { --hero-img: url('../images/hero-city.webp'); }
.page-hero--governance { --hero-img: url('../images/hero-boardroom.webp'); }
.page-hero--enterprise { --hero-img: url('../images/hero-ai.webp'); }
.page-hero--cases { --hero-img: url('../images/hero-datacenter.webp'); }
.page-hero--insights { --hero-img: url('../images/hero-analytics.webp'); }

/* Detail pages carry their own card artwork into the hero.
   Declared here rather than inline: a relative url() inside a custom property
   resolves against this stylesheet, so an inline override would break the path. */
.page-hero--cs-evyapport { --hero-img: url('../images/case-studies/evyapport-pruva-hero.webp'); }
.page-hero--cs-istanbul { --hero-img: url('../images/case-studies/istanbul-metropolitan-municipality-hero.webp'); }
.page-hero--cs-panasonic { --hero-img: url('../images/case-studies/panasonic-electric-works-hero.webp'); }
.page-hero--in-strategy { --hero-img: url('../images/blog/process-intelligence.webp'); }
.page-hero--in-process-mining { --hero-img: url('../images/blog/workflow-automation.webp'); }
.page-hero--in-internal-control { --hero-img: url('../images/blog/process-validation-hero.webp'); }
html[lang="tr"] .page-hero--in-internal-control { --hero-img: url('../images/blog/process-validation-tr.webp'); }
.page-hero--in-audit { --hero-img: url('../images/blog/internal-audit-hero.webp'); }
.page-hero--in-lean { --hero-img: url('../images/blog/industry-4-smart-manufacturing.webp'); }

.page-hero--contact {
  /* Görsel --hero-img üzerinden verilir ki panelden yüklenen dosya satır içi stille ezebilsin.
     Buradaki göreli yol bu stylesheet'e göre çözülür; panelden gelen yol ise /site/... ile
     başlayan mutlak bir yol olduğu için satır içi ezme sorunsuz çalışır. */
  --hero-img: url('../images/contact-hero.webp');
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.78) 36%, rgba(255, 255, 255, 0.22) 68%, rgba(255, 255, 255, 0.04) 100%),
    var(--hero-img) center / cover no-repeat;
  position: relative;
  overflow: hidden;
}

.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-border);
}

.page-hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
}

.page-breadcrumb {
  font-size: 0.8rem;
  color: #ffffff;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.page-breadcrumb a {
  color: #ffffff;
  text-decoration: none;
}

.page-breadcrumb a:hover {
  color: var(--color-primary-light);
}

.page-breadcrumb span {
  color: #ffffff;
}

/* Inner-page hero intro copy — white for readability on the dark hero image */
.page-hero > .container > p {
  color: #ffffff;
}

/* ==========================================================================
   ABOUT / COMPANY PAGE
   ========================================================================== */
.about-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

@media (max-width: 991px) {
  .about-story-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.about-stats-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.about-stat-card {
  background: rgba(112, 11, 25, 0.08);
  border: 1px solid rgba(112, 11, 25, 0.18);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: var(--transition-smooth);
}

.about-stat-num {
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--color-primary-light);
  line-height: 1;
  min-width: 90px;
}

.about-stat-desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.about-stat-desc strong {
  display: block;
  color: var(--color-text-light);
  margin-bottom: 2px;
  font-size: 1rem;
}

.approach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 991px) {
  .approach-grid {
    grid-template-columns: 1fr;
  }
}

.approach-card {
  background: var(--color-bg-card-solid);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 36px 28px;
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.approach-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
  opacity: 0;
  transition: var(--transition-smooth);
}

.approach-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(112, 11, 25, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--color-primary-light);
  font-size: 1.3rem;
  transition: var(--transition-smooth);
}

.approach-card h4 {
  font-size: 1.1rem;
  margin-bottom: 12px;
}

.approach-card p {
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 0;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (max-width: 767px) {
  .values-grid {
    grid-template-columns: 1fr;
  }
}

.value-item {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 24px;
  background: var(--color-bg-card-solid);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: var(--transition-smooth);
}

.value-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(112, 11, 25, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-light);
  font-size: 1rem;
}

.value-item h5 {
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.value-item p {
  font-size: 0.82rem;
  margin: 0;
  line-height: 1.5;
}

.partners-logo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: center;
}

.partner-logo-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 130px;
  min-width: 130px;
  max-width: 240px;
  height: 120px;
  transition: var(--transition-smooth);
}

.partner-logo-box:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(112, 11, 25, 0.3);
  transform: translateY(-4px);
}

.partner-logo-box:hover .partner-logo-img {
  transform: scale(1.05);
}

.partner-logo-box span {
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.partner-logo-box:hover span {
  color: rgba(255, 255, 255, 0.8);
}

.partner-logo-img {
  max-height: 64px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.55;
  transition: var(--transition-smooth);
}

.partner-logo-box:hover .partner-logo-img {
  opacity: 0.9;
}

/* Istanalytics artwork sits small inside its canvas — enlarge to match optical size */
.partner-logo-img[alt="Istanalytics"] {
  max-height: 86px;
  max-width: 100%;
}

/* ==========================================================================
   ABOUT PAGE — alternating light / maroon rhythm
   Story (light) · Approach (maroon) · Values (light) · Partners (maroon)
   ========================================================================== */

/* --- Light sections: Our Story, Our Values --- */
#about-story,
#about-values {
  background: var(--surface-light);
}

#about-story .section-label,
#about-values .section-label {
  color: var(--color-primary);
}

#about-story h2,
#about-values h2 {
  color: var(--on-light-heading);
}

#about-story p,
#about-values p {
  color: var(--on-light-body);
}

#about-values .about-values-lead {
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#about-values .about-values-lead p {
  text-align: center;
  margin-bottom: 0;
}

/* Story stat cards → white */
#about-story .about-stat-card {
  background: var(--card-bg);
  border-color: var(--card-border);
}

#about-story .about-stat-num {
  color: var(--color-primary);
}

#about-story .about-stat-desc {
  color: var(--on-light-muted);
}

#about-story .about-stat-desc strong {
  color: var(--on-light-heading);
}

/* Values items → white */
#about-values .value-item {
  background: var(--card-bg);
  border-color: var(--card-border);
}

#about-values .value-item h5 {
  color: var(--on-light-heading);
}

#about-values .value-item p {
  color: var(--on-light-muted);
}

/* --- Maroon sections: Our Approach, Technology Partners --- */
#about-approach,
#about-partners {
  background: var(--surface-maroon);
}

/* Intro paragraphs stay legible on the maroon background */
#about-approach > .container > .text-center p,
#about-partners > .container > .text-center p {
  color: rgba(255, 255, 255, 0.72);
}

/* Approach cards → white */
#about-approach .approach-grid {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 991px) {
  #about-approach .approach-grid {
    grid-template-columns: 1fr;
  }
}

#about-approach .approach-card {
  background: var(--card-bg);
  border-color: var(--card-border);
}

#about-approach .approach-card h4 {
  color: var(--on-light-heading);
}

#about-approach .approach-card p {
  color: var(--on-light-muted);
}

/* Partner logo boxes → white, logos shown in their original colors */
/* Index — Technology Partners on white background */
.partners-sec {
  background: #ffffff;
}

.partners-sec .section-label {
  color: var(--color-primary);
}

.partners-sec h2 {
  color: var(--on-light-heading);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  white-space: nowrap;
}

@media (max-width: 575px) {
  .partners-sec h2 {
    white-space: normal;
  }
}

.partners-sec p {
  color: var(--on-light-body);
}

.partners-sec .partner-logo-box {
  background: #ffffff;
  border-color: var(--card-border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.partners-sec .partner-logo-box:hover {
  background: #fafbfc;
  border-color: rgba(112, 11, 25, 0.3);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.partners-sec .partner-logo-img {
  filter: none;
  opacity: 0.9;
}

.partners-sec .partner-logo-box:hover .partner-logo-img {
  opacity: 1;
}

#about-partners .partner-logo-box {
  background: var(--card-bg);
  border-color: var(--card-border);
}

#about-partners .partner-logo-box:hover {
  background: #fafbfc;
  border-color: rgba(112, 11, 25, 0.3);
}

#about-partners .partner-logo-img {
  filter: none;
  opacity: 0.85;
}

#about-partners .partner-logo-box:hover .partner-logo-img {
  opacity: 1;
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 991px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-info-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 24px;
  background: var(--color-bg-card-solid);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: var(--transition-smooth);
}

.contact-info-item:hover {
  border-color: rgba(112, 11, 25, 0.25);
}

.contact-info-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(112, 11, 25, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-light);
  font-size: 1rem;
}

.contact-info-item h6 {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #d9d1d3;
  margin-bottom: 4px;
}

.contact-info-item p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

.contact-info-item a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.contact-info-item a:hover:not(.contact-social-btn) {
  color: var(--color-primary-light);
}

.contact-social-row {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

/* Follow Us row → icon · label · social button, left-aligned, vertically centered */
.contact-info-item--follow {
  align-items: center;
}

.contact-info-item--follow h6 {
  margin-bottom: 0;
}

.contact-info-item--follow .contact-social-row {
  margin-top: 0;
}

.contact-social-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 1rem;
  text-decoration: none;
  transition: var(--transition-fast);
}

.contact-social-btn:hover {
  background: rgba(112, 11, 25, 0.15);
  border-color: rgba(112, 11, 25, 0.35);
  color: var(--color-primary-light);
}

.contact-form-card {
  background: var(--color-bg-card-solid);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 36px;
  position: relative;
  overflow: hidden;
}

.contact-form-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light), transparent);
}

.contact-form-card h4 {
  font-size: 1.2rem;
  margin-bottom: 6px;
}

.contact-form-card>p {
  font-size: 0.85rem;
  margin-bottom: 24px;
}

.map-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  height: 420px;
}

.map-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ==========================================================================
   CONTACT PAGE — light theme
   ========================================================================== */
.page-contact {
  background: #f4f5f7;
}

.page-contact .page-hero--contact .page-breadcrumb,
.page-contact .page-hero--contact .page-breadcrumb a,
.page-contact .page-hero--contact .page-breadcrumb span {
  color: #6b7280;
}

.page-contact .page-hero--contact .page-breadcrumb a:hover {
  color: var(--color-primary);
}

.page-contact .page-hero--contact .section-label {
  color: var(--color-primary);
}

.page-contact .page-hero--contact h1 {
  color: #16181d;
}

.page-contact .page-hero--contact > .container > p {
  color: #4b5563;
}

.page-contact .page-hero--contact::after {
  background: #e6e8ec;
}

.page-contact .sec,
.page-contact .contact-main {
  background: #f4f5f7;
}

.page-contact .sec .section-label,
.page-contact .contact-main .section-label {
  color: var(--color-primary);
}

.page-contact .sec h2,
.page-contact .sec h3,
.page-contact .sec h5,
.page-contact .sec h6,
.page-contact .contact-main h3 {
  color: #16181d;
}

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

.page-contact .contact-info-item {
  background: #ffffff;
  border: 1px solid #e6e8ec;
  box-shadow: 0 8px 24px rgba(22, 24, 29, 0.04);
}

.page-contact .contact-info-item:hover {
  border-color: rgba(112, 11, 25, 0.28);
  box-shadow: 0 12px 28px rgba(22, 24, 29, 0.08);
}

.page-contact .contact-info-item h6 {
  color: #6b7280;
}

.page-contact .contact-info-item p,
.page-contact .contact-info-item a:not(.contact-social-btn) {
  color: #2b303b;
}

.page-contact .contact-info-item a:hover:not(.contact-social-btn) {
  color: var(--color-primary);
}

.page-contact .contact-info-icon {
  background: var(--color-primary);
  color: #ffffff;
}

.page-contact .contact-social-btn {
  background: #f3f4f6;
  border-color: #e5e7eb;
  color: #374151;
}

.page-contact .contact-info-item a.contact-social-btn:hover,
.page-contact .contact-social-btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

.page-contact .contact-form-card {
  background: #ffffff;
  border: 1px solid #e6e8ec;
  box-shadow: 0 18px 50px rgba(22, 24, 29, 0.08);
}

.page-contact .contact-form-card::before {
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light), transparent);
}

.page-contact .contact-form-card h4 {
  color: #16181d;
}

.page-contact .contact-form-card > p {
  color: #6b7280;
}

.page-contact .contact-form-card .form-label {
  font-size: 0.8rem;
  color: #374151 !important;
}

.page-contact .contact-form-card .form-label span,
.page-contact .contact-form-card .form-label a,
.page-contact .contact-form-card .form-consent-chk a {
  color: var(--color-primary) !important;
}

.page-contact .contact-form-card .form-control-premium {
  background: #f8f9fb;
  border-color: #e5e7eb;
  color: #16181d !important;
}

.page-contact .contact-form-card .form-control-premium::placeholder {
  color: #9ca3af;
}

.page-contact .contact-form-card .form-control-premium:focus {
  background: #ffffff;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(112, 11, 25, 0.12);
}

.page-contact .form-consent-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#contact-form {
  scroll-margin-top: 7rem;
}

.page-contact .f-form-alert,
.page-contact .f-nl-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.86rem;
  line-height: 1.55;
  margin-bottom: 16px;
}

.page-contact .f-form-alert ul,
.page-contact .f-nl-alert ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.page-contact .f-form-alert--error,
.page-contact .f-nl-alert--error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.page-contact .svc-chk {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #f8f9fb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  color: #4b5563;
  font-size: 0.82rem;
  line-height: 1.45;
}

.page-contact .svc-chk input[type="checkbox"] {
  margin-top: 0.2rem;
  accent-color: var(--color-primary);
}

.page-contact .contact-map-sec {
  background: #f4f5f7;
  padding: 0 0 80px;
}

.page-contact .map-wrap {
  border-color: #e6e8ec;
  background: #ffffff;
}

.page-contact footer {
  background: #080607;
}

/* ==========================================================================
   SOLUTION DETAIL PAGES — reusable light / maroon sections + feature cards
   ========================================================================== */
.sec--light {
  background: var(--surface-light);
}

.sec--maroon {
  background: var(--surface-maroon);
}

/* Light sections: dark headings, maroon eyebrow, dark prose */
.sec--light .section-label {
  color: var(--color-primary);
}

.sec--light h2,
.sec--light h3,
.sec--light h4,
.sec--light h5 {
  color: var(--on-light-heading);
}

.sec--light .sec-head p,
.sec--light .prose p {
  color: var(--on-light-body);
}

/* Maroon sections: white headings (default), lightened prose; eyebrow tinted */
.sec--maroon .section-label {
  color: #f0c8cd;
}

.sec--maroon .sec-head p,
.sec--maroon .prose p {
  color: rgba(255, 255, 255, 0.78);
}

/* Shared readable prose column */
.prose {
  max-width: 840px;
}

/* Full-container body copy — left edge lines up with the cards below it */
.prose--wide {
  max-width: 100%;
}

/* Text-only intro blocks that stand alone under a section heading — centered */
.prose--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.prose p {
  margin-bottom: 1.1rem;
}

.prose p:last-child {
  margin-bottom: 0;
}

/* Insight detail — left-aligned article body.
   Kapsam yalnızca makale detay sayfaları (TR makale-*, EN insight-*); bölüm
   varsayılanları ne olursa olsun gövde metni sola hizalı kalır. */
.insight-article {
  max-width: 820px;
}

.insight-article,
.insight-article .prose,
.insight-article .prose p,
.insight-article .insight-list,
.insight-article .insight-table th,
.insight-article .insight-table td,
.insight-article .feature-card {
  text-align: left;
}

.insight-article .blog-meta-v2 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  font-size: 0.75rem;
  color: var(--on-light-muted);
}

.insight-article .insight-heading {
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
}

.insight-article .insight-heading h3 {
  text-align: left;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
  color: var(--on-light-heading);
}

.insight-article .prose--wide {
  max-width: 100%;
}

.insight-article .insight-subheading {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.insight-article .insight-subheading h4 {
  text-align: left;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  color: var(--on-light-heading);
}

.insight-list {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.insight-list li {
  margin-bottom: 0.45rem;
  color: var(--on-light-body);
}

.insight-table {
  --bs-table-bg: transparent;
  font-size: 0.95rem;
}

.insight-table th,
.insight-table td {
  vertical-align: top;
  border-color: rgba(0, 0, 0, 0.08);
}

.insight-table thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
}

.sub-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 12px;
  display: block;
}

.sec--light .sub-eyebrow {
  color: var(--color-primary);
}

.sec--maroon .sub-eyebrow {
  color: #f0c8cd;
}

/* Feature card — white, dark text; works on both light and maroon sections */
.feature-card {
  background: #ffffff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 28px 26px;
  height: 100%;
  transition: var(--transition-smooth);
}

.feature-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(112, 11, 25, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 1.15rem;
  margin-bottom: 16px;
}

.feature-card h4 {
  font-size: 1.02rem;
  margin-bottom: 10px;
  color: var(--on-light-heading);
}

.feature-card p {
  font-size: 0.86rem;
  line-height: 1.6;
  margin: 0;
  color: var(--on-light-muted);
}

/* Product screenshot inside a feature card. The source images already carry
   their own device mockup, so no frame is added here. Pinned to the bottom so
   cards in the same row line their images up regardless of how long the copy
   above is. */
.feature-card:has(.card-shot) {
  display: flex;
  flex-direction: column;
}

.feature-card:has(.card-shot) p {
  margin-bottom: 18px;
}

.card-shot {
  margin-top: auto;
}

.card-shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* A screenshot placed under a capability/benefit list, not under a paragraph. */
.feature-card:has(.card-shot) ul {
  margin-bottom: 18px;
}

/* Half-width capability/benefit cards: the list is short enough to sit beside
   the screenshot, so from tablet up the shot moves into a second column and
   spans the heading and list rows. Below that it stacks as usual. */
@media (min-width: 768px) {
  .feature-card.cap-card:has(.card-shot) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "head shot"
      "list shot";
    align-content: start;
    column-gap: 24px;
  }
  .feature-card.cap-card:has(.card-shot) h4 { grid-area: head; }
  .feature-card.cap-card:has(.card-shot) ul {
    grid-area: list;
    margin-bottom: 0;
  }
  .feature-card.cap-card:has(.card-shot) .card-shot {
    grid-area: shot;
    align-self: center;
    margin-top: 0;
  }
}

.feature-card ul {
  margin: 12px 0 0;
  padding-left: 1.05rem;
}

.feature-card li {
  font-size: 0.83rem;
  line-height: 1.5;
  margin-bottom: 5px;
  color: var(--on-light-muted);
}

/* Highlighted callout (e.g. Academy) */
.pe-callout {
  background: #ffffff;
  border: 1px solid var(--card-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 34px 36px;
}

.pe-callout h3 {
  font-size: 1.45rem;
  margin-bottom: 14px;
  color: var(--on-light-heading);
}

.pe-callout p {
  margin: 0;
  line-height: 1.75;
  color: var(--on-light-muted);
}

#ms-risk .pe-callout {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  text-align: center;
  margin-bottom: 3.5rem;
}

#ms-risk .pe-callout .sub-eyebrow {
  display: inline-block;
}

#ms-risk .pe-callout h3 {
  font-size: 1.35rem;
}

#ms-risk .pe-callout p {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Divider rule inside content sections */
.sec-divider {
  border: 0;
  height: 1px;
  background: rgba(112, 11, 25, 0.12);
  margin: 56px 0;
}

/* ==========================================================================
   SOLUTION SUB-PAGES — image/text split visual + capability lists
   ========================================================================== */
.solution-visual {
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(112, 11, 25, 0.10), rgba(112, 11, 25, 0.02));
  border: 1px solid var(--card-border);
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 28px;
}

.solution-visual i {
  font-size: 2.8rem;
  color: var(--color-primary);
}

.solution-visual span {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-light-muted);
}

.sec--maroon .solution-visual {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02));
  border-color: rgba(255, 255, 255, 0.15);
}

.sec--maroon .solution-visual i { color: #ffffff; }
.sec--maroon .solution-visual span { color: rgba(255, 255, 255, 0.7); }

/* Split section real image */
.split-visual {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--card-border);
}
.split-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.sec--maroon .split-visual { border-color: rgba(255, 255, 255, 0.15); }

/* Standalone article meta (insight detail) — muted, not on a dark card */
.sec--light .blog-meta-v2 { color: var(--on-light-muted); }
.sec--maroon .blog-meta-v2 { color: rgba(255, 255, 255, 0.7); }

/* Split text block: eyebrow + heading + prose beside a visual */
.split-text .sub-eyebrow { display: inline-block; margin-bottom: 10px; }
.split-text h3 { margin-bottom: 16px; }

/* Capability / benefit list cards */
.cap-card h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
}
.cap-card h4 i { color: var(--color-primary); }

/* Blog card wrapped in a link (Insights listing) */
.blog-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.blog-card-link .blog-card-v2 { height: 100%; }

.sec--maroon .sec-divider {
  background: rgba(255, 255, 255, 0.12);
}

/* ==========================================================================
   LEARNING / WORKSHOP PAGES
   ========================================================================== */

/* Hero background override for the Learning hub page */
.page-hero--learning {
  background: radial-gradient(ellipse at 60% 40%, rgba(112, 11, 25, 0.22) 0%, transparent 65%),
    radial-gradient(ellipse at 10% 80%, rgba(112, 11, 25, 0.10) 0%, transparent 50%),
    linear-gradient(90deg, rgba(14, 12, 13, 0.72) 0%, rgba(14, 12, 13, 0.45) 45%, rgba(14, 12, 13, 0.12) 100%),
    url('../images/learning/learning-hero.webp') center / cover no-repeat;
}

/* Two-column text + media block used inside each workshop section */
.learning-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.learning-split--reverse .learning-copy {
  order: 2;
}

.learning-split--reverse .learning-media {
  order: 1;
}

@media (max-width: 991px) {
  .learning-split {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .learning-split--reverse .learning-copy,
  .learning-split--reverse .learning-media {
    order: 0;
  }
}

.learning-copy p {
  line-height: 1.75;
  margin-bottom: 1.1rem;
}

.learning-copy p:last-child {
  margin-bottom: 0;
}

.learning-highlights {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 36px;
}

@media (max-width: 767px) {
  .learning-highlights {
    grid-template-columns: 1fr;
  }
}

.learning-highlight {
  background: #fff;
  border: 1px solid var(--card-border, #e6e8ec);
  border-radius: var(--radius-md);
  padding: 22px 22px 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  text-align: left;
}

.learning-highlight-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(112, 11, 25, 0.12);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.learning-highlight h4 {
  font-size: 1.02rem;
  margin-bottom: 8px;
  color: var(--on-light-heading, #1a1416);
}

.learning-highlight p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--on-light-muted, #5c5558);
}

.sec--light .learning-copy p {
  color: var(--on-light-body);
}

.sec--maroon .learning-copy p {
  color: rgba(255, 255, 255, 0.80);
}

.learning-media {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(20, 16, 18, 0.28);
  aspect-ratio: 4 / 3.2;
  position: relative;
}

.learning-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, transparent 55%, rgba(112, 11, 25, 0.28) 100%);
  pointer-events: none;
}

.learning-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease;
}

.learning-media:hover img {
  transform: scale(1.05);
}

/* Small maroon-tinted eyebrow badge sitting above a workshop title */
.learning-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 18px;
}

.sec--light .learning-badge {
  background: rgba(112, 11, 25, 0.08);
  border: 1px solid rgba(112, 11, 25, 0.20);
  color: var(--color-primary);
}

.sec--maroon .learning-badge {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: #f0c8cd;
}

.learning-copy h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: 1.2;
  margin-bottom: 18px;
}

/* Highlighted question / lead-in block (e.g. Leadership questions) */
.learning-lead {
  border-left: 3px solid var(--color-primary-light);
  padding: 4px 0 4px 22px;
  margin-bottom: 24px;
  font-size: 1.02rem;
  font-weight: 500;
}

.sec--light .learning-lead {
  color: var(--on-light-heading);
}

.sec--maroon .learning-lead {
  color: #ffffff;
  border-left-color: #f0c8cd;
}

/* Legal / policy pages */
.legal-doc h2 {
  font-size: 1.35rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: var(--on-light-heading);
}

.legal-doc h3 {
  font-size: 1.05rem;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
  color: var(--on-light-heading);
}

.legal-doc ul,
.legal-doc ol {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}

.legal-doc li {
  margin-bottom: 0.5rem;
  color: var(--on-light-body);
}

.legal-updated {
  font-size: 0.9rem;
  color: var(--on-light-muted);
  margin-bottom: 2rem;
}

.legal-prefs-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  margin-top: 2rem;
}

.legal-prefs-card h3 {
  margin-top: 0;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: 0.92rem;
}

.legal-table th,
.legal-table td {
  border: 1px solid var(--card-border);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}

.legal-table th {
  background: #f8f9fa;
  color: var(--on-light-heading);
  font-weight: 600;
}

.legal-table td {
  color: var(--on-light-body);
}

.legal-doc code {
  font-size: 0.88em;
  background: #f0f1f3;
  padding: 2px 6px;
  border-radius: 4px;
}

/* ==========================================================================
   BACK TO TOP
   ========================================================================== */
.back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 100001;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(112, 11, 25, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: var(--transition-smooth);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--color-primary-light);
  box-shadow: 0 6px 28px rgba(112, 11, 25, 0.45);
}

.back-to-top.is-visible:hover {
  transform: translateY(-2px);
}

.back-to-top:focus-visible {
  outline: 3px solid var(--color-primary-light);
  outline-offset: 3px;
}

@media (max-width: 575px) {
  .back-to-top {
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .back-to-top.is-visible:hover {
    transform: none;
  }
}

/* ==========================================================================
   FORM RESULT PAGES — contact light chrome + centered card
   ========================================================================== */
.form-result-sec {
  padding-top: 72px;
  padding-bottom: 96px;
  min-height: 42vh;
}

.form-result-card {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  background: #ffffff;
  border: 1px solid #e6e8ec;
  border-radius: 16px;
  padding: 48px 40px;
  box-shadow: 0 8px 24px rgba(22, 24, 29, 0.04);
  position: relative;
  overflow: hidden;
}

.form-result-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light), transparent);
}

.form-result-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
}

.form-result-success .form-result-icon {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}

.form-result-error .form-result-icon {
  background: rgba(112, 11, 25, 0.08);
  color: var(--color-primary);
}

.form-result-card h2 {
  color: #16181d;
  font-size: 1.35rem;
  margin-bottom: 10px;
}

.form-result-card > p {
  color: #4b5563;
  font-size: 0.95rem;
  margin-bottom: 0;
}

.form-result-errors {
  list-style: none;
  padding: 0;
  margin: 20px auto 0;
  max-width: 480px;
  text-align: left;
}

.form-result-errors li {
  position: relative;
  padding: 12px 16px 12px 38px;
  margin-bottom: 8px;
  background: rgba(112, 11, 25, 0.05);
  border: 1px solid rgba(112, 11, 25, 0.16);
  border-radius: 10px;
  color: #7a1020;
  font-size: 0.9rem;
  line-height: 1.5;
}

.form-result-errors li::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 18px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}

.form-result-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
}

.form-result-card .btn-premium {
  background: var(--color-primary);
  color: #ffffff;
}

.form-result-card .btn-premium:hover {
  background: var(--color-primary-light);
  color: #ffffff;
}

.form-result-card .btn-premium-outline {
  color: var(--color-primary);
  border-color: rgba(112, 11, 25, 0.28);
  background: transparent;
}

.form-result-card .btn-premium-outline:hover {
  background: rgba(112, 11, 25, 0.06);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

@media (max-width: 575px) {
  .form-result-card {
    padding: 36px 22px;
  }

  .form-result-actions .btn-premium,
  .form-result-actions .btn-premium-outline {
    width: 100%;
    justify-content: center;
  }
}