/* =========================================================
   VALMETO / style.css
   Global Design System + Core Layout + Shared Components
   v2 — Premium / Üst Sınıf Tutarlılık Katmanı
========================================================= */

/* =========================================================
   1. DESIGN TOKENS
========================================================= */

:root {
  /* ---- Renkler ---- */
  --color-navy: #08172c;
  --color-navy-2: #10233f;
  --color-navy-3: #15345d;

  --color-gold: #d39b5b;
  --color-gold-light: #d7b57a;
  --color-gold-dark: #b8843d;

  --color-light: #f7f5f2;
  --color-white: #ffffff;

  --color-text-dark: #08172c;
  --color-text-light: #ffffff;
  --color-text-muted: #637084;
  --color-text-muted-on-white: #5a6678;

  --color-border-light: rgba(8, 23, 44, 0.12);
  --color-border-dark: rgba(247, 245, 242, 0.16);

  /* İkincil aksan — küçük dokunuşlar için (badge, status, link hover) */
  --color-accent-2: #6e93a3;
  --color-accent-2-light: #9cc0cd;

  /* ---- Gradients ---- */
  --gradient-navy: linear-gradient(135deg, #08172c 0%, #10233f 52%, #08172c 100%);
  --gradient-gold: linear-gradient(135deg, #d7b57a 0%, #d39b5b 100%);
  --gradient-light: linear-gradient(180deg, #ffffff 0%, #f7f5f2 100%);
  --gradient-overlay: linear-gradient(180deg, transparent 35%, rgba(8, 23, 44, 0.78) 100%);

  /* ---- Typography ---- */
  --font-main: "Inter", Arial, sans-serif;
  --font-heading: "Inter", Arial, sans-serif;

  --fs-h1: clamp(2.5rem, 5vw, 4rem);
  --fs-h2: clamp(1.8rem, 3vw, 2.5rem);
  --fs-h3: clamp(1.1rem, 2vw, 1.3rem);
  --fs-h4: clamp(1rem, 1.4vw, 1.15rem);
  --fs-body: 1rem;
  --fs-body-lg: clamp(1rem, 1.2vw, 1.125rem);
  --fs-small: 0.85rem;
  --fs-xs: 0.75rem;

  --lh-heading: 1.08;
  --lh-body: 1.65;

  /* ---- Layout ---- */
  --container: 1180px;
  --container-wide: 1480px;
  --container-narrow: 820px;

  --header-height-mobile: 72px;
  --header-height-desktop: 104px;

  /* ---- Spacing (fluid) ---- */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  --space-section: clamp(4rem, 8vw, 7rem);
  --space-section-sm: clamp(3rem, 6vw, 5rem);
  --space-gap: clamp(1rem, 2vw, 2rem);
  --space-card-pad: clamp(1.5rem, 3vw, 2.5rem);

  /* ---- Radius ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---- Elevation / Shadows ---- */
  --shadow-1: 0 2px 8px rgba(8, 23, 44, 0.06);
  --shadow-2: 0 8px 24px rgba(8, 23, 44, 0.10);
  --shadow-3: 0 24px 60px rgba(8, 23, 44, 0.16);
  --shadow-4: 0 40px 100px rgba(8, 23, 44, 0.24);

  /* Eski isimler — geriye dönük uyumluluk */
  --shadow-soft: var(--shadow-2);
  --shadow-card: var(--shadow-3);
  --shadow-gold: 0 16px 34px rgba(211, 155, 91, 0.30);

  /* ---- Motion ---- */
  --transition-fast: 180ms ease;
  --transition-base: 260ms ease;
  --transition-slow: 420ms cubic-bezier(0.16, 1, 0.3, 1);

  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================================
   2. RESET / BASE
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--color-navy);
}

body {
  margin: 0;
  background: var(--color-navy);
  color: var(--color-text-light);
  font-family: var(--font-main);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

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

/* Sabit (fixed) header'lı iç sayfalarda içeriği header altından başlatır.
   Hero'su kendi padding-top'unu header'a göre ayarlayan sayfalar (home gibi)
   page-offset KULLANMAZ; bu sınıf yalnızca düz iç sayfalar içindir. */
.page-offset {
  padding-top: var(--header-height-desktop);
}

@media (max-width: 768px) {
  .page-offset {
    padding-top: var(--header-height-mobile);
  }
}

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

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

button {
  cursor: pointer;
  background: none;
  border: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- Selection & Focus (premium detay) ---- */
::selection {
  background: var(--color-gold);
  color: var(--color-navy);
}

:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Skip Link (erişilebilirlik) ----
   Varsayılan olarak ekran dışına gizlenir, klavye focus'unda görünür olur. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 2000;

  padding: 0.65rem 1.25rem;

  border-radius: var(--radius-sm);
  background: var(--color-navy);
  color: var(--color-light);

  font-size: var(--fs-small);
  font-weight: 800;

  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 1rem;
}

/* =========================================================
   3. TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: inherit;
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: var(--lh-heading);
  letter-spacing: -0.045em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 {
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: -0.02em;
}

p {
  margin: 0;
  color: inherit;
  line-height: var(--lh-body);
}

small,
.text-small {
  font-size: var(--fs-small);
}

.text-xs {
  font-size: var(--fs-xs);
}

.text-lg {
  font-size: var(--fs-body-lg);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-gold {
  color: var(--color-gold);
}

.text-navy {
  color: var(--color-navy);
}

.text-light {
  color: var(--color-light);
}

.text-accent {
  color: var(--color-accent-2);
}

/* =========================================================
   4. LAYOUT
========================================================= */

.container {
  width: min(calc(100% - 2rem), var(--container));
  margin-inline: auto;
}

.container-wide {
  width: min(calc(100% - 2rem), var(--container-wide));
  margin-inline: auto;
}

.container-narrow {
  width: min(calc(100% - 2rem), var(--container-narrow));
  margin-inline: auto;
}

.section {
  padding-block: var(--space-section);
}

.section-sm {
  padding-block: var(--space-section-sm);
}

.section-dark {
  background: var(--gradient-navy);
  color: var(--color-light);
}

.section-light {
  background: var(--color-light);
  color: var(--color-navy);
}

/* Açık zemin varyantı — koyu section'lar arasında "nefes alma" alanı */
.section--soft {
  background: var(--color-light);
  color: var(--color-navy);
}

.section--soft .contact-detail__label {
  color: var(--color-text-muted-on-white);
}

.section--soft .contact-detail__value,
.section--soft .contact-detail__value a {
  color: var(--color-navy);
}

.section-heading {
  max-width: 820px;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
  color: var(--color-gold-light);
  font-size: var(--fs-small);
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.section-eyebrow::before {
  content: "";
  width: 48px;
  height: 1px;
  background: var(--color-gold-light);
}

.section-light .section-eyebrow {
  color: var(--color-gold-dark);
}

.section-light .section-eyebrow::before {
  background: var(--color-gold-dark);
}

/* ---- Grid sistemi ---- */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-gap);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-gap);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-gap);
}

/* =========================================================
   5. BUTTONS
========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;

  min-height: 48px;
  padding: 0.85rem 1.55rem;

  border-radius: var(--radius-pill);
  border: 1px solid transparent;

  font-size: 15px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;

  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: var(--gradient-gold);
  color: var(--color-navy);
  border-color: rgba(211, 155, 91, 0.7);
  box-shadow: var(--shadow-gold);
}

.btn-primary:hover {
  box-shadow: 0 20px 44px rgba(211, 155, 91, 0.40);
}

.btn-secondary {
  background: var(--color-white);
  color: var(--color-navy);
  border-color: var(--color-border-light);
  box-shadow: var(--shadow-2);
}

.btn-secondary:hover {
  box-shadow: var(--shadow-3);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-light);
  border-color: rgba(247, 245, 242, 0.34);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Eski sınıf uyumluluğu — silmeyin, eski markup bunlara bağlı olabilir */
.btn--primary {
  background: var(--gradient-gold);
  color: var(--color-navy);
  border-color: rgba(211, 155, 91, 0.7);
  box-shadow: var(--shadow-gold);
}

.btn--secondary {
  background: var(--color-white);
  color: var(--color-navy);
  border-color: var(--color-border-light);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-light);
  border-color: rgba(247, 245, 242, 0.34);
}

/* =========================================================
   6. CARDS
========================================================= */

.card,
.segment-card,
.resource-card,
.industry-card,
.product-card,
.rfq-card,
.contact-info-card,
.contact-map,
.stat-card,
.reason-card,
.audience-card {
  background: var(--color-light);
  color: var(--color-navy);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2);

  transition:
    transform var(--transition-base) var(--ease-premium),
    box-shadow var(--transition-base) var(--ease-premium),
    border-color var(--transition-base);
}

.card {
  padding: var(--space-card-pad);
}

/* Hover: kartlara hafif kalkış + derinlik — premium his */
.card:hover,
.segment-card:hover,
.resource-card:hover,
.industry-card:hover,
.product-card:hover,
.rfq-card:hover,
.contact-info-card:hover,
.stat-card:hover,
.reason-card:hover,
.audience-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-3);
  border-color: rgba(211, 155, 91, 0.35);
}

.card h3,
.segment-card h3,
.resource-card h3,
.industry-card h3,
.product-card h3,
.contact-info-card h3,
.stat-card h3,
.reason-card h3,
.audience-card h3 {
  color: var(--color-navy);
  margin-bottom: 0.6rem;
}

.card p,
.segment-card p,
.resource-card p,
.industry-card p,
.product-card p,
.contact-info-card p,
.stat-card p,
.reason-card p,
.audience-card p {
  color: var(--color-text-muted-on-white);
}

.card-dark {
  background: rgba(247, 245, 242, 0.06);
  color: var(--color-light);
  border-color: var(--color-border-dark);
}

.card-dark:hover {
  border-color: rgba(211, 155, 91, 0.45);
  background: rgba(247, 245, 242, 0.09);
}

/* Kart üst aksanı — istenirse .card--accent ile kullanılır */
.card--accent {
  position: relative;
  overflow: hidden;
}

.card--accent::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-gold);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.card--accent:hover::before {
  opacity: 1;
}

/* Durum / etiket rozetleri — ikincil aksan rengi burada kullanılır */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;

  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-pill);

  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  background: rgba(110, 147, 163, 0.14);
  color: var(--color-accent-2);
  border: 1px solid rgba(110, 147, 163, 0.28);
}

.badge--gold {
  background: rgba(211, 155, 91, 0.14);
  color: var(--color-gold-dark);
  border-color: rgba(211, 155, 91, 0.28);
}

/* ---- Category Card: ürün portföyü kartı (home + about) ----
   Açık zeminli, görsel paneli olan iki-kolonlu kart. Genel .card
   ailesinden farklı bir yapıya sahip olduğu için ayrı tanımlanır. */

.category-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 190px;
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-card-pad);
  overflow: hidden;

  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);

  background: linear-gradient(180deg, var(--color-white) 0%, #f9fafc 100%);
  color: var(--color-navy);

  box-shadow: var(--shadow-2);

  transition:
    transform var(--transition-base) var(--ease-premium),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.category-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 88% 18%,
    rgba(211, 155, 91, 0.08),
    transparent 34%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.category-card:hover {
  transform: translateY(-6px);
  border-color: rgba(211, 155, 91, 0.32);
  box-shadow: var(--shadow-3);
}

.category-card:hover::before {
  opacity: 1;
}

.category-card__content {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.category-card__index {
  margin-bottom: 0.6rem;
  color: var(--color-gold-dark);
  font-size: var(--fs-small);
  font-weight: 900;
  letter-spacing: 0.16em;
}

.category-card__title {
  margin: 0 0 0.8rem;
  color: var(--color-navy);
  font-size: clamp(1.75rem, 2.4vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.category-card__description {
  max-width: 42ch;
  margin-bottom: var(--space-md);
  color: var(--color-text-muted-on-white);
  font-size: var(--fs-body);
  line-height: 1.55;
}

.category-card__list {
  display: grid;
  gap: 0.42rem;
  margin: 0 0 var(--space-lg);
}

.category-card__list li {
  position: relative;
  padding-left: 1.05rem;
  color: var(--color-text-muted-on-white);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.4;
}

.category-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-gold);
}

.category-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-gold-dark);
  font-size: var(--fs-small);
  font-weight: 900;
  letter-spacing: -0.01em;
  transition: color var(--transition-fast);
}

.category-card__cta:hover,
.category-card__cta:focus-visible {
  color: var(--color-navy);
}

.category-card__cta-arrow {
  transition: transform var(--transition-fast);
}

.category-card__cta:hover .category-card__cta-arrow {
  transform: translateX(4px);
}

.category-card__media {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}

.category-card__media-shell {
  display: grid;
  place-items: center;
  width: 180px;
  height: 180px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  background:
    radial-gradient(circle at center, rgba(211, 155, 91, 0.08), transparent 58%),
    rgba(8, 23, 44, 0.02);
}

.category-card__media img {
  width: 100%;
  max-width: 170px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(8, 23, 44, 0.14));
  transition: transform var(--transition-base);
}

.category-card:hover .category-card__media img {
  transform: translateY(-4px) scale(1.03);
}

/* Mobilde tek kolon, görsel üstte */
@media (max-width: 720px) {
  .category-card {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .category-card__media {
    order: -1;
  }
}

/* =========================================================
   7. MEDIA / IMAGE TREATMENTS
========================================================= */

/* Görsel üstüne yazı için tutarlı overlay sistemi */
.media-overlay {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.media-overlay img,
.media-overlay video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.media-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-overlay);
  pointer-events: none;
}

.media-overlay:hover img,
.media-overlay:hover video {
  transform: scale(1.04);
}

.media-overlay__content {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--space-card-pad);
  color: var(--color-text-light);
}

.media-overlay__content h3,
.media-overlay__content p {
  color: var(--color-text-light);
}

/* =========================================================
   8. HEADER
========================================================= */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  width: 100%;

  background: transparent;
  border-bottom: 1px solid transparent;

  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    backdrop-filter var(--transition-fast);
}

.site-header.is-solid,
.site-header.scrolled {
  background: rgba(247, 245, 242, 0.96);
  border-color: rgba(8, 23, 44, 0.10);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(14px);
}

.site-header__inner {
  min-height: var(--header-height-mobile);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 58px;
  height: 58px;
  flex-shrink: 0;
}

.brand__sign,
.brand__title {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  transition: opacity var(--transition-fast);
}

.brand__sign {
  opacity: 1;
}

.brand__title {
  opacity: 0;
}

.site-header.is-solid .brand__sign,
.site-header.scrolled .brand__sign {
  opacity: 0;
}

.site-header.is-solid .brand__title,
.site-header.scrolled .brand__title {
  opacity: 1;
}

.site-nav {
  display: none;
}

.site-nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
}

.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;

  color: rgba(247, 245, 242, 0.92);

  font-size: 15px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;

  transition: color var(--transition-fast);
}

.site-header.is-solid .site-nav__link,
.site-header.scrolled .site-nav__link {
  color: var(--color-navy);
}

.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 2px;
  background: var(--gradient-gold);
  border-radius: var(--radius-pill);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-fast) var(--ease-premium);
}

.site-nav__link:hover::after,
.site-nav__link.active::after {
  transform: scaleX(1);
}

.header-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin-left: auto;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;

  min-height: 42px;
  padding: 0.65rem 1.15rem;

  border-radius: var(--radius-pill);
  border: 1px solid rgba(211, 155, 91, 0.7);

  background: var(--gradient-gold);
  color: var(--color-navy);

  font-size: 14px;
  font-weight: 900;
  line-height: 1;

  box-shadow: var(--shadow-gold);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.header-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(211, 155, 91, 0.40);
}

/* =========================================================
   9. MOBILE NAV
========================================================= */

.nav-toggle {
  width: 42px;
  height: 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: var(--radius-sm);
  border: 1px solid rgba(247, 245, 242, 0.26);

  background: rgba(255, 255, 255, 0.04);
  color: var(--color-light);

  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.site-header.is-solid .nav-toggle,
.site-header.scrolled .nav-toggle {
  color: var(--color-navy);
  border-color: rgba(8, 23, 44, 0.20);
}

.nav-toggle__line,
.nav-toggle__line::before,
.nav-toggle__line::after {
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: var(--radius-pill);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-toggle__line {
  position: relative;
}

.nav-toggle__line::before,
.nav-toggle__line::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__line::before {
  top: -6px;
}

.nav-toggle__line::after {
  top: 6px;
}

/* =========================================================
   10. MEGA MENU
========================================================= */

.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 1200;

  width: auto;
  min-width: 240px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateX(-50%) translateY(8px);

  transition:
    opacity var(--transition-fast),
    visibility var(--transition-fast),
    transform var(--transition-fast);
}

.site-nav__item--mega:hover > .mega-menu,
.site-nav__item--mega:focus-within > .mega-menu,
.site-nav__item--mega.is-mega-open > .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.mega-menu::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}

.mega-menu__main-list {
  position: relative;
  display: grid;
  gap: 0.25rem;

  min-width: 240px;
  padding: 0.65rem;

  border-radius: 18px;
  border: 1px solid rgba(8, 23, 44, 0.12);

  background: var(--color-light);
  box-shadow: var(--shadow-4);
}

.mega-menu__main-list > li {
  position: relative;
}

.mega-menu__main-list > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 40px;
  padding: 0.55rem 0.85rem;

  border-radius: 11px;

  color: var(--color-navy);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;

  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}

.mega-menu__main-list > li:hover > a,
.mega-menu__main-list > li:focus-within > a {
  background: rgba(211, 155, 91, 0.16);
  color: var(--color-navy);
}

.mega-menu__sub-list {
  position: absolute;
  top: -0.65rem;
  left: calc(100% + 2px);
  z-index: 1250;

  display: none;
  grid-template-columns: 1fr;
  gap: 0.25rem;

  min-width: 260px;
  max-width: 320px;
  max-height: min(70vh, 520px);

  padding: 0.75rem;
  overflow: visible;

  border-radius: 18px;
  border: 1px solid rgba(8, 23, 44, 0.12);

  background: var(--color-light);
  box-shadow: var(--shadow-4);
}

/* Sub-list ile ana liste arasındaki boşluğu köprüle — mouse kaçmasın */
.mega-menu__sub-list::before {
  content: "";
  position: absolute;
  top: 0;
  left: -16px;
  width: 16px;
  height: 100%;
}

.mega-menu__main-list > li:hover > .mega-menu__sub-list,
.mega-menu__main-list > li:focus-within > .mega-menu__sub-list {
  display: grid;
}

.mega-menu__group {
  position: relative;
}

.mega-menu__group > a {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 34px;
  padding: 0.45rem 0.7rem;

  border-radius: 10px;

  color: var(--color-text-muted-on-white);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;

  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}

.mega-menu__group > a:hover,
.mega-menu__group:hover > a,
.mega-menu__group:focus-within > a {
  background: rgba(211, 155, 91, 0.14);
  color: var(--color-navy);
}

.mega-menu__third-list {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(100% + 2px);
  z-index: 1300;

  display: none;
  grid-template-columns: 1fr;
  gap: 0.25rem;

  min-width: 260px;
  max-width: 340px;

  max-height: calc(100vh - 120px);
  overflow-y: auto;

  padding: 0.75rem;

  border-radius: 18px;
  border: 1px solid rgba(8,23,44,0.12);

  background: var(--color-light);
  box-shadow: var(--shadow-4);
}

.mega-menu__group {
    position: relative;
}

.mega-menu__third-list::before {
  content: "";
  position: absolute;
  top: 0;
  left: -16px;
  width: 16px;
  height: 100%;
}

.mega-menu__group:hover > .mega-menu__third-list,
.mega-menu__group:focus-within > .mega-menu__third-list {
  display: grid;
}

.mega-menu__third-list a {
  display: flex;
  align-items: center;

  min-height: 34px;
  padding: 0.45rem 0.7rem;

  border-radius: 10px;

  color: var(--color-text-muted-on-white);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;

  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}

.mega-menu__third-list a:hover {
  background: rgba(211, 155, 91, 0.14);
  color: var(--color-navy);
}

/* Ana liste öğesi sağ tarafını köprü alanı olarak kullan */
.mega-menu__main-list > li {
  position: relative;
}

.mega-menu__main-list > li > a {
  position: relative;
  z-index: 1;
}

.mega-menu__sub-list > a,
.mega-menu__sub-list .mega-menu__group > a {
  display: flex;
  align-items: center;

  min-height: 34px;
  padding: 0.45rem 0.7rem;

  border-radius: 10px;

  color: var(--color-text-muted-on-white);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;

  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}

.mega-menu__sub-list > a:hover,
.mega-menu__sub-list .mega-menu__group > a:hover {
  background: rgba(211, 155, 91, 0.14);
  color: var(--color-navy);
}

/* =========================================================
   11. FORMS
========================================================= */

.form-field {
  display: grid;
  gap: 0.45rem;
}

.form-field label {
  color: var(--color-navy);
  font-size: var(--fs-small);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

input,
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;

  border-radius: var(--radius-md);
  border: 1px solid rgba(8, 23, 44, 0.14);

  background: var(--color-white);
  color: var(--color-navy);

  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 4px rgba(211, 155, 91, 0.14);
  outline: none;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

/* =========================================================
   12. TABLES
========================================================= */

.table-wrap,
.resources-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 0.85rem 1rem;
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--gradient-navy);
  color: var(--color-light);
  font-weight: 900;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

td {
  background: var(--color-white);
  color: var(--color-navy);
  border-bottom: 1px solid rgba(8, 23, 44, 0.10);
}

tbody tr {
  transition: background var(--transition-fast);
}

tbody tr:hover td {
  background: var(--color-light);
}

/* =========================================================
   13. CTA
========================================================= */

.cta-banner {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: var(--radius-xl);
  background: var(--color-light);
  color: var(--color-navy);
  box-shadow: var(--shadow-2);
}

.cta-banner h2,
.cta-banner h3,
.cta-banner p {
  color: var(--color-navy);
}

.cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

/* Hero buton grubu (about, industries page-hero'larında) */
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: var(--space-xl);
}

/* Koyu zeminli CTA varyantı */
.cta-banner--dark {
  background: var(--gradient-navy);
  color: var(--color-light);
  box-shadow: var(--shadow-3);
}

.cta-banner--dark h2,
.cta-banner--dark h3,
.cta-banner--dark p {
  color: var(--color-light);
}

/* =========================================================
   14. FOOTER
========================================================= */

.footer {
  padding-block: clamp(3.5rem, 6vw, 5.5rem) 1.5rem;
  background: var(--gradient-navy);
  color: var(--color-light);
}

.footer__grid {
  display: grid;
  grid-template-columns:
    minmax(280px, 1.45fr)
    minmax(150px, 0.8fr)
    minmax(300px, 1.25fr)
    minmax(230px, 0.9fr);
  gap: clamp(2rem, 4vw, 4rem);
}

.footer__logo {
  width: 220px;
  max-width: 100%;
  height: auto;
  margin-bottom: 1.15rem;
}

.footer-social {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-dark);
  color: var(--color-light);
  font-size: 1.05rem;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.footer-social a:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-navy);
}

.footer h3,
.footer h4,
.footer__title {
  margin: 0 0 1rem;
  color: var(--color-gold-light);
  font-size: var(--fs-h4);
  font-weight: 900;
}

.footer p,
.footer li,
.footer a,
.footer span {
  color: rgba(247, 245, 242, 0.86);
}

.footer a {
  transition: color var(--transition-fast);
}

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

.footer__list {
  display: grid;
  gap: 0.7rem;
}

/* ---- Contact list: ikon + içerik satırı ----
   Her <li> içinde önce ikon (img.footer-icon), sonra metin (span/a) gelir.
   İkon gold tonuna çevrilir (filter ile) ve dikey ortalanır. */

.footer-contact-list {
  display: grid;
  gap: 0.9rem;
}

.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.footer-contact-list li.footer-company {
  font-weight: 800;
  color: var(--color-light);
}

.footer-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  /* SVG ikonları gold tonuna çevir */
  filter:
    brightness(0)
    saturate(100%)
    invert(78%)
    sepia(27%)
    saturate(710%)
    hue-rotate(356deg)
    brightness(94%)
    contrast(90%);
}

.footer__copyright {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(215, 181, 122, 0.18);
  color: rgba(247, 245, 242, 0.58);
  font-size: 14px;
}

/* =========================================================
   15. SCROLL REVEAL UTILITY
========================================================= */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 560ms var(--ease-premium), transform 560ms var(--ease-premium);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* =========================================================
   16. SKELETON / LOADING
========================================================= */

.skeleton {
  background: linear-gradient(90deg, var(--color-light) 25%, #ece9e4 50%, var(--color-light) 75%);
  background-size: 200% 100%;
  border-radius: var(--radius-md);
  animation: skeleton-loading 1.4s ease infinite;
}

@keyframes skeleton-loading {
  to { background-position: -200% 0; }
}

/* =========================================================
   17. UTILITIES
========================================================= */

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

.hidden {
  display: none !important;
}

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

/* =========================================================
   18. RESPONSIVE
========================================================= */

@media (min-width: 768px) {
  .site-header__inner {
    min-height: 72px;
  }

  .site-nav {
    display: flex;
    justify-content: center;
    flex: 1;
  }

  .brand {
    width: 190px;
    min-width: 190px;
    height: 72px;
  }

  .nav-toggle {
    display: none;
  }
}

@media (min-width: 769px) {
  .site-header__inner {
    height: var(--header-height-desktop);
    min-height: var(--header-height-desktop);
  }

  .brand {
    height: var(--header-height-desktop);
  }
}

@media (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mega-menu {
    width: min(92vw, 720px);
  }

  .mega-menu__main-list {
    grid-template-columns: 200px minmax(240px, 1fr);
  }

  .mega-menu__sub-list {
    left: calc(200px + 1.25rem);
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .section {
    padding-block: clamp(3.5rem, 12vw, 5rem);
  }

  .card:hover,
  .segment-card:hover,
  .resource-card:hover,
  .industry-card:hover,
  .product-card:hover,
  .rfq-card:hover {
    transform: none;
  }

  .site-nav {
    position: fixed;
    inset: var(--header-height-mobile) 0 auto;

    display: block;

    padding: 1rem;
    max-height: calc(100vh - var(--header-height-mobile));
    overflow-y: auto;

    background: rgba(247, 245, 242, 0.98);
    border-top: 1px solid rgba(8, 23, 44, 0.10);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-8px);

    transition:
      opacity var(--transition-fast),
      visibility var(--transition-fast),
      transform var(--transition-fast);
  }

  body.menu-open .site-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .site-nav__list {
    display: grid;
    gap: 0.35rem;
  }

  .site-nav__link {
    color: var(--color-navy);
  }

  .mega-menu {
    position: static;
    width: 100%;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    margin-top: 0.5rem;
  }

  .mega-menu__main-list {
    grid-template-columns: 1fr;
    min-height: 0;
    max-height: none;
  }

  .mega-menu__sub-list {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    margin-left: 0.75rem;
    padding-left: 0.75rem;
  }

  .cta-banner__actions {
    flex-direction: column;
  }
}

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

/* =========================================================
   19. REDUCED MOTION
========================================================= */

@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;
  }
}

/* =========================================================
   20. COOKIE CONSENT BANNER
========================================================= */

.cc-overlay {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 1.5rem;
  pointer-events: none;
}

.cc-modal {
  pointer-events: auto;
  width: 100%;
  max-width: 660px;
  padding: 2rem 2.25rem;

  border-radius: var(--radius-xl);
  border: 1px solid rgba(215, 181, 122, 0.22);

  background: rgba(8, 23, 44, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  color: rgba(247, 245, 242, 0.88);

  box-shadow:
    0 -4px 32px rgba(0, 0, 0, 0.18),
    0 32px 80px rgba(8, 23, 44, 0.38);

  animation: cc-slide-up 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cc-slide-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cc-title {
  margin: 0 0 0.75rem;
  color: var(--color-gold-light);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cc-content {
  margin-bottom: 1.5rem;
}

.cc-text {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(247, 245, 242, 0.78);
  margin-bottom: 0.65rem;
}

.cc-more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-gold-light);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.cc-more-toggle:hover {
  color: var(--color-gold);
}

.cc-more-content {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(247, 245, 242, 0.10);
}

.cc-more-content p {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(247, 245, 242, 0.64);
  margin-bottom: 0.65rem;
}

.cc-more-content p:last-child {
  margin-bottom: 0;
}

.cc-privacy-link {
  color: var(--color-gold-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

.cc-privacy-link:hover {
  color: var(--color-gold);
}

.cc-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 42px;
  padding: 0.6rem 1.35rem;

  border-radius: var(--radius-pill);
  border: 1px solid transparent;

  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;

  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.cc-btn:hover {
  transform: translateY(-1px);
}

.cc-btn--reject {
  background: rgba(247, 245, 242, 0.06);
  color: rgba(247, 245, 242, 0.72);
  border-color: rgba(247, 245, 242, 0.18);
}

.cc-btn--reject:hover {
  background: rgba(247, 245, 242, 0.12);
  color: var(--color-light);
  border-color: rgba(247, 245, 242, 0.30);
}

.cc-btn--accept {
  background: var(--gradient-gold);
  color: var(--color-navy);
  border-color: rgba(211, 155, 91, 0.7);
  box-shadow: 0 4px 16px rgba(211, 155, 91, 0.28);
}

.cc-btn--accept:hover {
  box-shadow: 0 8px 24px rgba(211, 155, 91, 0.42);
}

/* Footer'daki "Cookie settings" linki */
.footer-cookie-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 13px;
  color: rgba(247, 245, 242, 0.58);
  transition: color var(--transition-fast);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.footer-cookie-link:hover {
  color: var(--color-gold-light);
}

@media (max-width: 640px) {
  .cc-overlay {
    padding: 1rem;
    align-items: flex-end;
  }

  .cc-modal {
    padding: 1.5rem;
    border-radius: var(--radius-lg);
  }

  .cc-actions {
    flex-direction: column;
  }

  .cc-btn {
    width: 100%;
  }
}

/* =========================================================
   21. DİL SEÇİCİ
========================================================= */

.lang-switcher {
  position: relative;
  flex-shrink: 0;
}

.lang-switcher__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 36px;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(247, 245, 242, 0.28);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(247, 245, 242, 0.88);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.site-header.is-solid .lang-switcher__btn,
.site-header.scrolled .lang-switcher__btn {
  border-color: rgba(8, 23, 44, 0.18);
  color: var(--color-navy);
  background: rgba(8, 23, 44, 0.04);
}

.lang-switcher__btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(247, 245, 242, 0.45);
}

.site-header.is-solid .lang-switcher__btn:hover,
.site-header.scrolled .lang-switcher__btn:hover {
  background: rgba(211, 155, 91, 0.10);
  border-color: rgba(211, 155, 91, 0.35);
}

.lang-switcher__btn svg {
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.lang-switcher__btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.lang-switcher__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1300;

  display: none;
  flex-direction: column;
  gap: 2px;

  min-width: 140px;
  padding: 0.5rem;

  border-radius: var(--radius-lg);
  border: 1px solid rgba(8, 23, 44, 0.12);

  background: var(--color-light);
  box-shadow: var(--shadow-4);

  list-style: none;
  margin: 0;
}

.lang-switcher__dropdown.is-open {
  display: flex;
}

.lang-switcher__dropdown li {
  margin: 0;
  padding: 0;
}

.lang-switcher__dropdown button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 36px;
  padding: 0.4rem 0.75rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-navy);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast);
}

.lang-switcher__dropdown button span {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted-on-white);
  letter-spacing: 0;
}

.lang-switcher__dropdown button:hover {
  background: rgba(211, 155, 91, 0.12);
}

.lang-switcher__dropdown button.is-active {
  background: rgba(211, 155, 91, 0.16);
  color: var(--color-gold-dark);
}

.lang-switcher__dropdown button.is-active span {
  color: var(--color-gold-dark);
}

@media (max-width: 767px) {
  .lang-switcher {
    position: static;
  }

  .lang-switcher__btn {
    border-color: rgba(247, 245, 242, 0.28);
    color: rgba(247, 245, 242, 0.88);
    background: rgba(255, 255, 255, 0.06);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .lang-switcher__dropdown {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    z-index: 99999 !important;
    border-radius: 16px 16px 0 0;
    border: none;
    border-top: 1px solid rgba(8, 23, 44, 0.12);
    padding: 1.25rem;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.22);
    pointer-events: auto !important;
    touch-action: auto !important;
  }

  .lang-switcher__dropdown.is-open {
    display: flex !important;
  }

  .lang-switcher__dropdown li {
    flex: 1 1 calc(33.333% - 0.5rem);
    min-width: 80px;
  }

  .lang-switcher__dropdown button {
    justify-content: center;
    flex-direction: column;
    gap: 0.2rem;
    min-height: 56px;
    border-radius: 10px;
    border: 1px solid rgba(8, 23, 44, 0.10);
    background: rgba(8, 23, 44, 0.04);
    font-size: 14px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    pointer-events: auto;
    cursor: pointer;
  }

  .lang-switcher__dropdown button span {
    font-size: 11px;
  }

  .lang-switcher__dropdown button.is-active {
    background: rgba(211, 155, 91, 0.18);
    border-color: rgba(211, 155, 91, 0.40);
    color: var(--color-gold-dark);
  }
}