.services-page .service-item { margin-bottom: 20px; }
.services-page .service-item .media { aspect-ratio: 16 / 9; width: 100%; height: auto; object-fit: cover; }
@media (max-width: 960px){ .services-page .grid.cols-2 { grid-template-columns: 1fr; } }
/* Services page: ensure media is visible even with .flow-equal defaults */
.services-page .flow-equal .media { height: auto !important; aspect-ratio: 16 / 9; display: block; }
/* Services page: remove card padding rule (cards removed) */
.services-page .service-item.card { padding: 0; }
/* Services page: align text and images neatly */
.services-page .service-item { align-items: center; }
.services-page .service-item > div:first-child { padding-top: 0; }
/* Services page: make images slightly smaller on desktop */
@media (min-width: 961px){
  .services-page .service-item .media { width: 88%; margin-left: auto; }
}
/* Services page: force gray texts to be black */
.services-page .section-subtitle { color: var(--color-fg) !important; font-weight: 500; font-size: clamp(16px, 1.9vw, 20px); text-align: center; margin: 0 auto 12px; }
/* Thin separator below intro text on Services page */
.services-page .services-separator { height: 1px; background: var(--color-line); margin: 0 auto 20px; }
/* Services page: reduce gap between gray hero and intro */
body[data-page="capabilities"] .hero.hero-gray + .section { padding-top: 24px !important; }
.services-page .muted { color: var(--color-fg) !important; }
/* Thin divider between consecutive services */
.services-page .service-item + .service-item { border-top: 1px solid var(--color-line); padding-top: 20px; }
:root {
  --color-bg: #ffffff;
  --color-fg: #0a0a0a;
  --color-muted: #6b6b6b;
  --color-line: #e6e6e6;
  --color-invert-bg: #0a0a0a;
  --color-invert-fg: #ffffff;
  --max-w: 1200px;
  --radius: 8px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --color-accent: #e80a00;
}

* {
  box-sizing: border-box;
}

html, body {
  padding: 0;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.6;
  height: 100%;
}

/* Sticky footer layout to eliminate bottom white gap on short pages */
body { display: flex; min-height: 100vh; flex-direction: column; }
main { flex: 1 0 auto; }

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

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

a:hover {
  text-decoration: underline;
}

/* Top navigation underline hover/active (no shadow) */
.main-nav > a, .main-nav .has-dropdown {
  position: relative;
  text-decoration: none;
}
.site-header .main-nav a[href="urunler.html"]{
  display: none !important; /* temporarily hide Products from top menu */
}
.main-nav > a:hover, .main-nav .has-dropdown:hover { text-decoration: none; }
.main-nav > a::after, .main-nav .has-dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 280ms ease;
}
.main-nav > a:hover::after, .main-nav .has-dropdown:hover::before { transform: scaleX(1); }
.main-nav a.active::after { transform: scaleX(1); }
/* Keep underline and red color on Kurumsal when inside its subpages (only the first dropdown i.e., Kurumsal) */
body[data-page="about"] .main-nav .has-dropdown-wrap:first-of-type > .has-dropdown,
body[data-page="history"] .main-nav .has-dropdown-wrap:first-of-type > .has-dropdown,
body[data-page="management"] .main-nav .has-dropdown-wrap:first-of-type > .has-dropdown,
body[data-page="facilities"] .main-nav .has-dropdown-wrap:first-of-type > .has-dropdown,
body[data-page="announcements"] .main-nav .has-dropdown-wrap:first-of-type > .has-dropdown,
body[data-page="president"] .main-nav .has-dropdown-wrap:first-of-type > .has-dropdown,
body[data-page="references"] .main-nav .has-dropdown-wrap:first-of-type > .has-dropdown { color: var(--color-accent); }
body[data-page="about"] .main-nav .has-dropdown-wrap:first-of-type > .has-dropdown::before,
body[data-page="history"] .main-nav .has-dropdown-wrap:first-of-type > .has-dropdown::before,
body[data-page="management"] .main-nav .has-dropdown-wrap:first-of-type > .has-dropdown::before,
body[data-page="facilities"] .main-nav .has-dropdown-wrap:first-of-type > .has-dropdown::before,
body[data-page="announcements"] .main-nav .has-dropdown-wrap:first-of-type > .has-dropdown::before,
body[data-page="president"] .main-nav .has-dropdown-wrap:first-of-type > .has-dropdown::before,
body[data-page="references"] .main-nav .has-dropdown-wrap:first-of-type > .has-dropdown::before { transform: scaleX(1); }

/* Policies page: keep underline and color on Kurumsal (first dropdown only) */
body[data-page="policies"] .main-nav .has-dropdown-wrap:first-of-type > .has-dropdown { color: var(--color-accent); }
body[data-page="policies"] .main-nav .has-dropdown-wrap:first-of-type > .has-dropdown::before { transform: scaleX(1); }

/* Capabilities-family pages: keep underline and color on Kabiliyetler (second dropdown) */
body[data-page="capabilities"] .main-nav .has-dropdown-wrap:nth-of-type(2) > .has-dropdown { color: var(--color-accent); }
body[data-page="capabilities"] .main-nav .has-dropdown-wrap:nth-of-type(2) > .has-dropdown::before { transform: scaleX(1); }

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 20px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--color-fg);
  color: var(--color-bg);
  background: var(--color-fg);
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.button:hover,
.button.is-hover {
  transform: translateY(-1px);
  text-decoration: none;
}

.button.secondary {
  background: transparent;
  color: var(--color-fg);
}

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-line);
  color: var(--color-muted);
  font-size: 12px;
  letter-spacing: 0.3px;
}

.card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* Vision/Mission card hover animation */
.vm-card { transition: box-shadow 200ms ease, transform 180ms ease, border-color 200ms ease; }
.vm-card:hover,
.vm-card.is-hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,0.12); border-color: #dcdcdc; }

/* About page: center mission/vision cards and their headings */
body[data-page="about"] .vm-section .vm-card { text-align: center; margin-left: auto; margin-right: auto; max-width: 1100px; }
body[data-page="about"] .vm-section .vm-card h2 { text-align: center; }

/* Page transition animations */
body.page-enter { opacity: 0.001; transform: translateY(6px); }
body.page-enter-active { opacity: 1; transform: translateY(0); transition: opacity 280ms ease, transform 280ms ease; }
body.page-leave { opacity: 0; transform: translateY(6px); transition: opacity 220ms ease, transform 220ms ease; }

/* About page: card and images hover elevation */
body[data-page="about"] .about-equal .card { transition: box-shadow 200ms ease, transform 180ms ease, border-color 200ms ease; }
body[data-page="about"] .about-equal .card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,0.12); border-color: #e2e2e2; }

body[data-page="about"] .media-stack .media {
  transition: box-shadow 220ms ease, transform 200ms ease, filter 200ms ease;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
body[data-page="about"] .media-stack .media:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(0,0,0,0.14);
  filter: saturate(1.04);
}

/* Lightbox (About images dblclick) */
body[data-page="about"] .lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: none; align-items: center; justify-content: center; z-index: 10000; }
body[data-page="about"] .lightbox.open { display: flex; animation: lbFade 180ms ease; }
body[data-page="about"] .lightbox .lb-img { max-width: min(92vw, 1200px); max-height: 90vh; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,0.4); transform: scale(0.96); animation: lbZoom 180ms ease forwards; position: relative; z-index: 1; }
body[data-page="about"] .lightbox .lb-close { position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,0.92); border: 1px solid var(--color-line); border-radius: 999px; padding: 6px 10px; font-size: 14px; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.12); z-index: 3; }
body[data-page="about"] .lightbox .lb-prev,
body[data-page="about"] .lightbox .lb-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.92); border: 1px solid var(--color-line); width: 44px; height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.12); font-size: 22px; z-index: 3; }
body[data-page="about"] .lightbox .lb-prev { left: 16px; z-index: 3; }
body[data-page="about"] .lightbox .lb-next { right: 16px; }
/* Reuse lightbox styling for sector pages */
body[data-page="sector"] .lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: none; align-items: center; justify-content: center; z-index: 10000; }
body[data-page="sector"] .lightbox.open { display: flex; animation: lbFade 180ms ease; }
body[data-page="sector"] .lightbox .lb-img { max-width: min(92vw, 1200px); max-height: 70vh; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,0.4); transform: scale(0.96); animation: lbZoom 180ms ease forwards; position: relative; z-index: 1; }
body[data-page="sector"] .lightbox .lb-close { position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,0.92); border: 1px solid var(--color-line); border-radius: 999px; padding: 6px 10px; font-size: 14px; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.12); z-index: 3; }
body[data-page="sector"] .lightbox .lb-prev,
body[data-page="sector"] .lightbox .lb-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.92); border: 1px solid var(--color-line); width: 44px; height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.12); font-size: 22px; z-index: 3; }
body[data-page="sector"] .lightbox .lb-prev { left: 16px; z-index: 3; }
body[data-page="sector"] .lightbox .lb-next { right: 16px; }
/* Lightbox thumbnail strip */
body[data-page="sector"] .lightbox .lb-thumbs { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; }
body[data-page="sector"] .lightbox .lb-thumbs-track { display: inline-flex; gap: 8px; max-width: min(92vw, 1200px); overflow-x: auto; padding: 8px 10px; background: rgba(255,255,255,0.85); border: 1px solid var(--color-line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.18); }
body[data-page="sector"] .lightbox .lb-thumbs-track img { height: 54px; width: auto; border-radius: 6px; border: 1px solid #ddd; cursor: pointer; opacity: .8; transition: transform .15s ease, opacity .15s ease, border-color .15s ease; }
body[data-page="sector"] .lightbox .lb-thumbs-track img:hover { opacity: 1; transform: translateY(-1px); }
body[data-page="sector"] .lightbox .lb-thumbs-track img.active { opacity: 1; border-color: #e80a00; box-shadow: 0 0 0 2px rgba(232,10,0,.15); }
/* Mobile: keep image large; make arrows minimal (no white circle), with shadow for contrast */
@media (max-width: 640px){
  body[data-page="about"] .lightbox .lb-prev,
  body[data-page="about"] .lightbox .lb-next,
  body[data-page="sector"] .lightbox .lb-prev,
  body[data-page="sector"] .lightbox .lb-next{
    background: transparent;
    border: none;
    box-shadow: none;
    color: rgba(255,255,255,0.98);
    width: 56px;
    height: 56px;
    font-size: 34px;
    text-shadow:
      0 10px 24px rgba(0,0,0,0.55),
      0 2px 8px rgba(0,0,0,0.65);
  }
  body[data-page="about"] .lightbox .lb-prev,
  body[data-page="sector"] .lightbox .lb-prev{ left: 6px; }
  body[data-page="about"] .lightbox .lb-next,
  body[data-page="sector"] .lightbox .lb-next{ right: 6px; }
}
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lbZoom { to { transform: scale(1); } }

.section {
  padding: 72px 0;
}

.section-header {
  margin-bottom: 28px;
}

.section-title {
  font-size: 32px;
  line-height: 1.2;
  margin: 0 0 8px 0;
}

.section-subtitle {
  color: var(--color-muted);
  margin: 0;
}

.grid {
  display: grid;
  gap: 20px;
}

.grid.cols-1 {
  grid-template-columns: 1fr;
}

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

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

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

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

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

/* Header */
.site-header {
  position: fixed; /* keep visible on desktop + mobile */
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 50;
  background: #ffffff;
  color: #0a0a0a;
  border-bottom: 1px solid var(--color-line);
}

/* Since header is fixed, reserve space so content doesn't slide under it */
body{
  padding-top: 68px;
}

.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.brand-mark {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: flex-start;
  border-radius: 6px;
  background: #fff;
  color: #000;
  font-size: 16px;
  font-weight: 800;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.main-nav a {
  color: var(--color-fg);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  transition: color .2s ease, text-shadow .2s ease;
}

.main-nav a:hover { color: var(--color-accent); text-shadow: none; background: transparent; }

.main-nav a.active { color: var(--color-accent); background: transparent; text-shadow: none; }
/* TURKAS nav icon support */
.main-nav > a.nav-with-icon { display: inline-flex; align-items: center; gap: 6px; }
.main-nav > a.nav-with-icon .nav-icon { height: 14px; width: auto; display: block; }

.cta {
  margin-left: 8px;
}

.menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid #dcdcdc;
  color: var(--color-fg);
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

@media (max-width: 1024px) {
  /* iOS/Safari: reduce fixed-header flicker */
  .site-header{ transform: translateZ(0); }

  .menu-toggle { display: inline-flex; align-items: center; justify-content: flex-start; border: none; background: transparent; box-shadow: none; border-radius: 0; }
  /* Animated hamburger -> X (mobile drawer toggle) */
  .menu-toggle{
    position: relative;
    width: 40px;
    height: 40px;
    padding: 0;
    color: #111;
    font-size: 0; /* hide the "☰" character */
    line-height: 0;
    z-index: 80; /* keep icon above the header dim overlay so the X is not shadowed */
  }
  .menu-toggle::before,
  .menu-toggle::after{
    content: "";
    position: absolute;
    left: 13px;  /* smaller icon */
    right: 13px; /* smaller icon */
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 220ms ease, top 220ms ease, box-shadow 220ms ease;
  }
  /* top line + middle line via box-shadow */
  .menu-toggle::before{
    top: 14px;                 /* 3 lines equally spaced */
    box-shadow: 0 5px 0 currentColor; /* middle line */
  }
  /* bottom line */
  .menu-toggle::after{
    top: 24px; /* bottom line (same spacing as middle) */
  }
  /* Open state: morph into X and hide middle line */
  body.nav-open .menu-toggle{
    color: #fff;
  }
  body.nav-open .menu-toggle::before{
    top: 19px; /* center */
    transform: rotate(45deg) scale(1.18);
    box-shadow: none;
  }
  body.nav-open .menu-toggle::after{
    top: 19px; /* center */
    transform: rotate(-45deg) scale(1.18);
  }

  /* Backdrop: darken page behind the drawer */
  body::before{
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
    z-index: 40; /* below sticky header (50) so the drawer (inside header) never gets dimmed */
  }
  body.nav-open::before{
    opacity: 1;
    pointer-events: auto;
  }
  body.nav-open{
    overflow: hidden;
  }
  /* Dim the top sticky header bar too (keep it clickable) */
  /* Keep header fixed (do not revert to sticky here) */
  .site-header{ position: fixed; }
  .site-header::after{
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 0;
    bottom: -2px; /* cover the thin seam between header and content */
    background: rgba(0,0,0,.45);
    opacity: 0;
    pointer-events: none; /* do NOT block hamburger */
    transition: opacity 200ms ease;
    z-index: 60; /* above header content, below the drawer (1000) */
  }
  body.nav-open .site-header::after{ opacity: 1; }
  /* Off-canvas mobile drawer */
  .main-nav {
    position: fixed !important; top: 0 !important; left: 0 !important;
    height: 100vh !important; width: 82vw; max-width: 360px;
    background: #ffffff; border-right: 1px solid var(--color-line);
    padding: 16px 0 0 0; box-sizing: border-box;
    transform: translateX(-100%) !important; transition: transform .28s ease;
    overflow-y: auto; z-index: 1000 !important;
    display: block !important; pointer-events: none;
  }
  .main-nav.open { transform: translateX(0) !important; pointer-events: auto; }
  /* In the drawer, dropdowns are hidden by default and open on parent click */
  .main-nav .dropdown {
    position: static;
    display: block; /* keep in layout so we can animate */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    box-shadow: none;
    border: none;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    visibility: visible !important;
    transition: max-height 260ms ease, opacity 200ms ease, transform 260ms ease;
  }
  /* Drawer closed: keep dropdowns collapsed */
  .main-nav.open .dropdown { max-height: 0; opacity: 0; transform: translateY(-6px); pointer-events: none; }
  /* Dropdown open (accordion) */
  .has-dropdown-wrap.open .dropdown { max-height: 520px; opacity: 1; transform: translateY(0); pointer-events: auto; }

  /* Mobile drawer: "merdiven" (ladder) animation for dropdown items */
  @media (prefers-reduced-motion: no-preference){
    .main-nav .dropdown > a,
    .main-nav .dropdown > button{
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 180ms ease, transform 220ms ease;
      transition-delay: 0ms;
    }
    .has-dropdown-wrap.open .dropdown > a,
    .has-dropdown-wrap.open .dropdown > button{
      opacity: 1;
      transform: translateY(0);
    }
    .has-dropdown-wrap.open .dropdown > a:nth-child(1),
    .has-dropdown-wrap.open .dropdown > button:nth-child(1){ transition-delay: 40ms; }
    .has-dropdown-wrap.open .dropdown > a:nth-child(2),
    .has-dropdown-wrap.open .dropdown > button:nth-child(2){ transition-delay: 90ms; }
    .has-dropdown-wrap.open .dropdown > a:nth-child(3),
    .has-dropdown-wrap.open .dropdown > button:nth-child(3){ transition-delay: 140ms; }
    .has-dropdown-wrap.open .dropdown > a:nth-child(4),
    .has-dropdown-wrap.open .dropdown > button:nth-child(4){ transition-delay: 190ms; }
    .has-dropdown-wrap.open .dropdown > a:nth-child(5),
    .has-dropdown-wrap.open .dropdown > button:nth-child(5){ transition-delay: 240ms; }
    .has-dropdown-wrap.open .dropdown > a:nth-child(6),
    .has-dropdown-wrap.open .dropdown > button:nth-child(6){ transition-delay: 290ms; }
  }
  /* Force vertical stacking for nav groups in mobile drawer */
  .main-nav .nav-item,
  .main-nav .has-dropdown-wrap { display: block; width: 100%; }
  .main-nav > a,
  .main-nav .has-dropdown { display: flex; align-items: center; width: 100%; }
  /* Visual style like screenshot: bold, uppercase, fixed row height */
  .main-nav > a,
  .main-nav .has-dropdown {
    height: 44px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 400;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
  }
  /* Right-side grey affordance with chevron for dropdown rows */
  .main-nav .has-dropdown {
    position: relative;
    padding-right: 44px;
    /* Paint the right-side gray block without using ::before/::after (prevents conflicts) */
    background: linear-gradient(to left, #ededed 44px, #ffffff 0);
    -webkit-tap-highlight-color: transparent; /* iOS: don't flash gray highlight */
  }
  .main-nav > a,
  .main-nav .has-dropdown{
    -webkit-tap-highlight-color: transparent; /* iOS: don't flash gray highlight */
  }
  /* Prevent hover/focus from painting an extra gray block on the left */
  .main-nav > a:hover,
  .main-nav > a:active,
  .main-nav > a:focus-visible{
    background: #ffffff !important;
  }
  .main-nav .has-dropdown:hover,
  .main-nav .has-dropdown:active,
  .main-nav .has-dropdown:focus-visible{
    background: linear-gradient(to left, #ededed 44px, #ffffff 0) !important;
  }
  /* Kill the desktop underline pseudo-element on mobile */
  .main-nav .has-dropdown::before { content: none !important; display: none !important; }
  /* Chevron (arrow) centered inside the gray block */
  .main-nav .has-dropdown::after{
    content: '';
    position: absolute;
    right: 18px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid #111111;
    border-bottom: 2px solid #111111;
    transform: translateY(-50%) rotate(225deg);
    transition: transform .2s ease;
    z-index: 1;
    background: transparent;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.22));
  }
  .main-nav .has-dropdown-wrap.open > .has-dropdown::after { transform: translateY(-50%) rotate(45deg); }

  /* Language selector inside drawer: match Kurumsal/Kabiliyetler row exactly */
  .main-nav .lang--drawer .lang-btn.has-dropdown{
    width: 100%;
    height: 44px;
    padding: 0 16px;
    padding-right: 44px; /* reserve right gray strip */
    border: 0;
    border-radius: 0;
    background: linear-gradient(to left, #ededed 44px, #ffffff 0);
    color: var(--color-fg);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .04em;
    text-transform: uppercase;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    box-shadow: none;
    transform: none;
  }
  /* Chevron for language row (overrides default lang-btn caret) */
  .main-nav .lang--drawer .lang-btn.has-dropdown::after{
    content: '';
    position: absolute;
    right: 18px;
    top: 50%;
    width: 8px;
    height: 8px;
    border: 0; /* reset default caret borders */
    border-right: 2px solid #111111;
    border-bottom: 2px solid #111111;
    transform: translateY(-50%) rotate(225deg);
    transition: transform .2s ease;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.22));
  }
  .main-nav .lang--drawer.open > .lang-btn.has-dropdown::after{
    transform: translateY(-50%) rotate(45deg);
  }
  .main-nav .lang--drawer .lang-btn.has-dropdown:hover,
  .main-nav .lang--drawer .lang-btn.has-dropdown:active,
  .main-nav .lang--drawer .lang-btn.has-dropdown:focus-visible{
    background: linear-gradient(to left, #ededed 44px, #ffffff 0) !important;
    color: var(--color-fg) !important;
    box-shadow: none !important;
    transform: none !important;
  }
  /* Remove red underline and hover color in mobile */
  .main-nav > a::after { display: none !important; content: none !important; }
  .main-nav a:hover, .main-nav .has-dropdown:hover { color: var(--color-fg) !important; }
  .main-nav a.active { color: var(--color-fg) !ant; }
  /* Each menu item is now an independent background area between two lines */
  .main-nav > a,
  .main-nav > .has-dropdown-wrap { 
    border-bottom: 1px solid var(--color-line);
    background: #ffffff;
    position: relative;
  }
  /* First item after logo has top border */
  .main-nav > a:first-of-type,
  .main-nav > .has-dropdown-wrap:first-of-type { border-top: 1px solid var(--color-line); }
  /* Remove top border from items that follow another item */
  .main-nav > a + .has-dropdown-wrap,
  .main-nav > .has-dropdown-wrap + .has-dropdown-wrap,
  .main-nav > a + a,
  .main-nav > .has-dropdown-wrap + a { border-top: none !important; }
  /* Last item */
  .main-nav > a:last-child,
  .main-nav > .has-dropdown-wrap:last-child { border-bottom: 1px solid var(--color-line); }
  /* Keep border-bottom fixed when dropdown opens */
  .main-nav .has-dropdown { border-bottom: none !important; }
  .main-nav > .has-dropdown-wrap.open .has-dropdown { border-bottom: 1px solid var(--color-line) !important; }
  .main-nav > a,
  .main-nav .has-dropdown { padding: 0 16px; }
  /* Custom background support for individual menu items */
  /* KURUMSAL menu background - 4/5 white (left), 1/5 grey (right) */
  .main-nav > .has-dropdown-wrap:first-of-type {
    background: linear-gradient(to right, #ffffff 80%, #f5f5f5 80%) !important;
  }
  /* KABİLİYETLER menu background - 4/5 white (left), 1/5 grey (right) */
  .main-nav > .has-dropdown-wrap:nth-of-type(2) {
    background: linear-gradient(to right, #ffffff 80%, #f5f5f5 80%) !important;
  }
  /* remove any rounded corners so lines look perfectly straight */
  .main-nav > a,
  .main-nav .has-dropdown,
  .main-nav .dropdown a { border-radius: 0 !important; }
  /* Also add separators for dropdown links - match top-level menu items exactly */
  .main-nav .dropdown a,
  .main-nav .dropdown button {
    border-top: none !important;
    border-bottom: none !important;
    padding: 14px 16px 0 24px !important;
    height: 44px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 400 !important;
    font-size: 14px !important;
    background: #f5f5f5 !important;
  }
  .main-nav .dropdown a:last-child { border-bottom: none; }
  /* Logo at the top inside the drawer */
  .main-nav::before {
    content: ''; display: block; height: 40px; width: 100%;
    background-image: url('../img/logo.png');
    background-repeat: no-repeat;
    background-position: 16px center; /* align with menu padding */
    background-size: auto 24px; /* fixed logo size */
    margin: 12px 0 16px;
    border-bottom: none;
  }
  /* Vertical list look */
  .main-nav a { display: block; padding: 10px 16px; }
  .cta { display: none; }
  /* Language selector in drawer: use SAME structure/classes as other dropdowns (JS adds has-dropdown-wrap/has-dropdown/dropdown) */
  .main-nav .lang { margin-left: 0 !important; }
  .main-nav .lang-btn { appearance: none; -webkit-appearance: none; }
  .main-nav .lang-btn.has-dropdown { border: 0; background: transparent; }
}

/* Mobile refinements */
@media (max-width: 640px) {
  /* Header bar is shorter on phones; match body offset */
  body{ padding-top: 60px; }
}

/* Phones: hide header language (it is shown inside drawer under TURKAS) */
@media (max-width: 767px){
  .site-header .lang { display: none !important; }
}

/* iPad / iPad Pro: show language next to hamburger in header */
@media (min-width: 768px) and (max-width: 1024px){
  .site-header .lang { display: block !important; }
  /* Keep hamburger + language adjacent on the right */
  .site-header .bar { justify-content: flex-start; }
  .site-header .brand { margin-right: auto; }
  .site-header .menu-toggle { margin-left: 0; }
  .site-header .lang { margin-left: 10px; }
  /* Safety: on iPad/tablet, never show a drawer-cloned language selector */
  .main-nav .lang--drawer { display: none !important; }
}

/* iPad (768–960): make header language look IDENTICAL to 1024px (avoid <=960 overrides) */
@media (min-width: 768px) and (max-width: 960px){
  .site-header .lang-btn { height: 36px !important; }
  .site-header .lang-menu {
    top: 44px !important;
    backdrop-filter: saturate(180%) blur(8px) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.12) !important;
  }
}

/* Hero */
.hero {
  padding: 72px 0 36px;
}

.hero h1 {
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1.1;
  margin: 0 0 16px 0;
}

.hero p {
  font-size: 18px;
  color: var(--color-muted);
  margin: 0 0 24px 0;
}

.hero .actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Feature Cards */
.feature-card {
  padding: 20px;
}

.feature-card h3 {
  margin: 8px 0 6px;
  font-size: 18px;
}

.feature-card p {
  margin: 0;
  color: var(--color-muted);
}

/* List */
.list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--color-line);
}

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

.kpi .item {
  padding: 18px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  text-align: center;
}

.kpi .item .num {
  display: block;
  font-weight: 800;
  font-size: 28px;
}

/* Banner */
.banner {
  background: var(--color-invert-bg);
  color: var(--color-invert-fg);
  border-radius: var(--radius);
  padding: 28px;
}

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

/* Tables */
.table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
}

.table th, .table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-line);
  text-align: left;
}

.table thead th {
  background: #f8f8f8;
}

/* Forms */
.input, .textarea, .select {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  outline: none;
  background: #fff;
}

.textarea {
  height: auto;
  padding: 10px 12px;
  min-height: 120px;
  resize: vertical;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

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

/* Footer */
.site-footer {
  background: var(--color-invert-bg);
  color: var(--color-invert-fg);
  border-top: 1px solid #111;
}

.site-footer .top {
  padding: 48px 0 24px;
}

.site-footer .bottom { text-align: left;
  padding: 18px 0 28px;
  border-top: 1px solid #111;
  color: rgba(255,255,255,0.6);
  font-size: 14px;
}

.site-footer a { color: var(--color-invert-fg); }

/* Utilities */
.spacer-xs { height: 6px; }
.spacer-sm { height: 12px; }
.spacer-md { height: 20px; }
.spacer-lg { height: 32px; }

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

/* Media placeholders */
.media {
  aspect-ratio: 16 / 9;
  background: #f2f2f2;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

/* Sectors layout */
.sectors-layout { align-items: start; gap: 24px; }
/* Products page: center the vertical divider exactly between columns */
body[data-page="products"] .sectors-layout,
body[data-page="oem"] .sectors-layout { gap: 0; }
.sectors-left { }
body[data-page="products"] .sectors-left,
body[data-page="oem"] .sectors-left { padding-right: 24px; }
.sectors-right { position: sticky; top: 90px; align-self: start; }
body[data-page="products"] .sectors-right,
body[data-page="oem"] .sectors-right { border-left: 0; padding-left: 0; margin-left: 0; }
body[data-page="products"] .products-grid,
body[data-page="oem"] .products-grid { border-left: 1px solid var(--color-line); padding-left: 24px; }
@media (max-width: 960px){
  body[data-page="products"] .sectors-right,
  body[data-page="oem"] .sectors-right { border-left: 0; padding-left: 0; margin-left: 0; }
  body[data-page="products"] .products-grid,
  body[data-page="oem"] .products-grid { border-left: 0; padding-left: 0; }
  body[data-page="products"] .sectors-right .section-title,
  body[data-page="oem"] .sectors-right .section-title { padding-left: 0; }
}

/* OEM mobile: add breathing room between last sector card and "TÜM ÜRÜNLER" title */
@media (max-width: 640px){
  body[data-page="oem"] .sectors-right{
    margin-top: 36px;
  }
}
.products-list { border: none; }
.products-list li { border: none; }

/* Products page: card grid for all products (right side) */
body[data-page="products"] .products-grid,
body[data-page="oem"] .products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (max-width: 1200px){
  body[data-page="products"] .products-grid,
  body[data-page="oem"] .products-grid { grid-template-columns: 1fr; }
}
@media (min-width: 1201px){
  body[data-page="products"] .products-grid,
  body[data-page="oem"] .products-grid { grid-template-columns: 1fr; }
}
body[data-page="products"] .product-card,
body[data-page="oem"] .product-card {
  background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius);
  padding: 14px 12px; box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
body[data-page="products"] .product-card .pc-title,
body[data-page="oem"] .product-card .pc-title { font-weight: 700; letter-spacing: .02em; font-size: 14px; line-height: 1.35; }
body[data-page="products"] .product-card:hover,
body[data-page="oem"] .product-card:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 14px 30px rgba(0,0,0,0.12); border-color: #e2e2e2; }
body[data-page="products"] .sectors-left .section-title,
body[data-page="oem"] .sectors-left .section-title { margin-bottom: 24px; }
body[data-page="products"] .sectors-right .section-title,
body[data-page="oem"] .sectors-right .section-title { margin-bottom: 24px; padding-left: 24px; }

.sectors-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
/* make .wide card span two columns */
.sectors-grid .sector-card.wide { grid-column: span 2; }
@media (max-width: 960px){ .sectors-grid { grid-template-columns: 1fr; } .sectors-right { position: static; } }

/* Capabilities page: 3 cards per row, 2 rows */
body[data-page="capabilities"] .sectors-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Make each capability card span two rows (double height) */
body[data-page="capabilities"] .sectors-grid { grid-auto-rows: 260px; }
body[data-page="capabilities"] .sectors-grid .sector-card { grid-row: span 2; }
body[data-page="capabilities"] .sector-card picture { height: 100%; }
body[data-page="capabilities"] .sector-card img, 
body[data-page="capabilities"] .sector-card video { height: 100%; }
/* Bottom full-width card spans all 3 columns and one row height */
body[data-page="capabilities"] .sectors-grid .sector-card.wide-all { grid-column: 1 / -1; grid-row: span 1; }
body[data-page="capabilities"] .sectors-grid .sector-card.wide-all .media-cover { height: 260px; width: 100%; }
body[data-page="capabilities"] .sectors-grid .sector-card.wide-all picture,
body[data-page="capabilities"] .sectors-grid .sector-card.wide-all img { height: 100%; width: 100%; }
/* Fill right-side gap on the full-width capabilities card */
body[data-page="capabilities"] .sector-card.wide-all .media-cover { position: relative; }
body[data-page="capabilities"] .sector-card.wide-all picture,
body[data-page="capabilities"] .sector-card.wide-all img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }

/* Capabilities page: PHONES - stack cards vertically */
@media (max-width: 640px){
  body[data-page="capabilities"] .sectors-grid{
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
  }
  body[data-page="capabilities"] .sectors-grid .sector-card{
    grid-row: auto !important;
  }
  /* Restore normal media sizing on mobile (capabilities rules make it fill grid rows) */
  body[data-page="capabilities"] .sector-card picture{
    height: 260px !important;
  }
  body[data-page="capabilities"] .sector-card img,
  body[data-page="capabilities"] .sector-card video{
    height: 260px !important;
  }
  body[data-page="capabilities"] .sectors-grid .sector-card.wide-all{
    grid-column: auto !important;
    grid-row: auto !important;
  }
  body[data-page="capabilities"] .sectors-grid .sector-card.wide-all .media-cover{
    height: auto !important;
  }
}

/* Capabilities page: tablets (iPad 768 etc.) - 2 cards per row */
@media (min-width: 641px) and (max-width: 960px){
  body[data-page="capabilities"] .sectors-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
  }
  body[data-page="capabilities"] .sectors-grid .sector-card{
    grid-row: auto !important;
  }
  body[data-page="capabilities"] .sector-card picture{
    height: 260px !important;
  }
  body[data-page="capabilities"] .sector-card img,
  body[data-page="capabilities"] .sector-card video{
    height: 260px !important;
  }
  body[data-page="capabilities"] .sectors-grid .sector-card.wide-all{
    grid-column: auto !important;
    grid-row: auto !important;
  }
  body[data-page="capabilities"] .sectors-grid .sector-card.wide-all .media-cover{
    height: auto !important;
  }
}

/* Sector detail pages: 3 columns grid for cards */
body[data-page="sector"] .sectors-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
/* Sector pages (OEM -> sector-*): mobile should stack cards vertically */
@media (max-width: 640px){
  body[data-page="sector"] .sectors-grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  body[data-page="sector"] .sectors-grid .sector-card{
    grid-column: auto !important;
  }
}
/* Make sector page top scroller full-width */
body[data-page="sector"] .album-scroller > .container { max-width: none; padding-left: 0; padding-right: 0; }
body[data-page="sector"] .album-viewport { border: 0; border-radius: 0; }
/* For 5 cards layout (3 on first row, 2 centered on second) */
/* Centering for bottom-two is handled only by .center-bottom-two variant */
/* Explicit center of the last two cards when container marks it */
body[data-page="sector"] .sectors-grid.center-bottom-two { max-width: 1100px; margin-left: auto; margin-right: auto; position: relative; }
body[data-page="sector"] .sectors-grid.center-bottom-two > .sector-card { justify-self: center; }
/* First of the bottom two centers between top card 1 and 2 */
body[data-page="sector"] .sectors-grid.center-bottom-two > .sector-card:nth-last-child(2) { grid-column: 1 / span 1; transform: translateX(50%); }
/* Second of the bottom two centers between top card 2 and 3 */
body[data-page="sector"] .sectors-grid.center-bottom-two > .sector-card:last-child { grid-column: 3 / span 1; transform: translateX(-50%); }
@media (max-width: 960px){
  body[data-page="sector"] .sectors-grid.center-bottom-two > .sector-card:nth-last-child(2),
  body[data-page="sector"] .sectors-grid.center-bottom-two > .sector-card:last-child { grid-column: auto; transform: none; }
}
/* Center a single sector card within the grid when marked as centered */
body[data-page="sector"] .sectors-grid .sector-card.centered { grid-column: 2 / span 1; }
@media (max-width: 960px){ body[data-page="sector"] .sectors-grid .sector-card.centered { grid-column: auto; } }
/* Center 2 cards on sector pages as a group */
body[data-page="sector"] .sectors-grid.center-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: center;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 960px){
  body[data-page="sector"] .sectors-grid.center-two { grid-template-columns: 1fr; max-width: 680px; }
}
/* Center 4 cards as a group, fixed 2x2 centered */
body[data-page="sector"] .sectors-grid.center-four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: center;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  gap: 0;
}
@media (max-width: 960px){
  body[data-page="sector"] .sectors-grid.center-four { grid-template-columns: 1fr; max-width: 680px; }
}
/* Center single card */
body[data-page="sector"] .sectors-grid.center-one {
  grid-template-columns: 1fr;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

/* Home hero typewriter caret */
body[data-page="home"] .hero h1.is-typing::after,
body[data-page="home"] .hero p.is-typing::after,
body[data-page="home"] .hero .actions .button.is-typing::after {
  content: "|";
  display: inline-block;
  margin-left: 4px;
  animation: caretBlink .9s step-end infinite;
  opacity: .9;
}
/* Position CTA caret on the right side of the button */
body[data-page="home"] .hero .actions .button { position: relative; }
body[data-page="home"] .hero .actions .button.is-typing::after { 
  content: "|"; 
  position: absolute; 
  right: 10px; 
  top: 50%; 
  transform: translateY(-50%);
  margin-left: 0;
}
/* Keep caret visible (blinking) for a while after typing ends */
body[data-page="home"] .hero h1.caret-hold::after,
body[data-page="home"] .hero p.caret-hold::after,
body[data-page="home"] .hero .actions .button.caret-hold::after {
  content: "|";
  display: inline-block;
  margin-left: 4px;
  animation: caretBlink .9s step-end infinite;
  opacity: .9;
}
/* Keep CTA caret on the right during hold */
body[data-page="home"] .hero .actions .button.caret-hold::after { 
  content: "|"; 
  position: absolute; 
  right: 10px; 
  top: 50%; 
  transform: translateY(-50%);
  margin-left: 0;
}
@keyframes caretBlink { 50% { opacity: 0; } }

/* Hide hero texts until typewriter starts */
body.type-init .hero h1[data-i18n="hero.headline"],
body.type-init .hero p[data-i18n="hero.lead"],
body.type-init .hero .actions .button { visibility: hidden; }
/* Sector detail pages: remove card radius and shadows for flush layout */
body[data-page="sector"] .sector-card { border-radius: 0; box-shadow: none; }
/* Sector detail pages: thinner card title font */
body[data-page="sector"] .sector-card .title { font-weight: 800; }
/* Remove extra top spacing since we show cards at top */
body[data-page="sector"] .section:first-of-type { padding-top: 0; }
/* Make the first content section after gallery have no extra top padding */
body[data-page="sector"] .hero + .album-scroller + .section { padding-top: 0; }
/* Sector intro paragraph spacing */
/* Center the intro text vertically between gallery and cards with symmetric spacing */
body[data-page="sector"] .sector-intro { margin: 24px 0 24px 0; font-weight: 500; color: var(--color-fg); text-align: center; font-size: 17px; }
@media (min-width: 961px){ body[data-page="sector"] .sector-intro { margin-top: 28px; margin-bottom: 28px; font-size: 18px; } }

.sector-card { position: relative; display: block; overflow: hidden; border-radius: 8px; border: 1px solid var(--color-line); box-shadow: var(--shadow-sm); background: #000; }
.sector-card .media-cover { position: relative; }
.sector-card picture { display: block; width: 100%; height: 260px; }
.sector-card img, .sector-card video { width: 100%; height: 260px; object-fit: cover; display: block; filter: brightness(.92); transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .5s ease; will-change: transform, filter; }
.sector-card:hover img, .sector-card:hover video,
.sector-card.is-hover img, .sector-card.is-hover video { transform: scale(1.04); filter: brightness(.86); }

/* Capabilities page: remove bottom gap by forcing media to fill double-height cards */
body[data-page="capabilities"] .sector-card .media-cover { height: 100%; }
body[data-page="capabilities"] .sector-card picture { height: 100% !important; }
body[data-page="capabilities"] .sector-card img,
body[data-page="capabilities"] .sector-card video { height: 100% !important; }

/* Capabilities nav tabs (like policies) */
body[data-page="capabilities"] .cap-nav { position: relative; display:flex; align-items:flex-end; gap:8px; border-bottom:1px solid var(--color-line); margin-bottom: 14px; }
body[data-page="capabilities"] .cap-nav .tab { position: relative; appearance:none; background: transparent; border:0; color: var(--color-fg); padding: 8px 12px; line-height: 1; font-weight:700; font-size:13px; text-transform: uppercase; letter-spacing:.05em; cursor: pointer; }
body[data-page="capabilities"] .cap-nav .tab::after { content: ""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background: #e80a00; transform: scaleX(0); transform-origin: center; transition: transform 280ms ease; z-index: 1; }
body[data-page="capabilities"] .cap-nav .tab[aria-selected="true"]::after,
body[data-page="capabilities"] .cap-nav .tab:hover::after { transform: scaleX(1); }
body[data-page="capabilities"] .cap-nav .tab[aria-selected="true"] { color: #e80a00; }
/* Prevent hover lift to keep underline alignment */
body[data-page="capabilities"] .cap-nav .tab:hover { background: transparent; transform: none; }
body[data-page="capabilities"] .cap-panels .tabpanel { display:none; }
body[data-page="capabilities"] .cap-panels .tabpanel.active { display:block; }
/* Equipment list styling */
body[data-page="capabilities"] .equip-list { border: none; display: grid; grid-template-columns: 1fr; gap: 14px; padding: 0; list-style: none; }
body[data-page="capabilities"] .equip-list li { border: 1px solid var(--color-line); padding: 14px 12px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 10px; transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease; }
body[data-page="capabilities"] .equip-list li:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #dcdcdc; }
body[data-page="capabilities"] .equip-list li > span:first-child { width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: #0a0a0a; color: #fff; font-size: 12px; line-height: 1; }
body[data-page="capabilities"] .equip-list li > span:nth-child(2) { line-height: 1.45; }
body[data-page="capabilities"] .equip-list li .qty { font-weight: 800; color: #0a0a0a; letter-spacing: .03em; }
/* Spacing between Makina Parkuru title and cards */
body[data-page="capabilities"] #cap-parkur .section-title { margin-top: 20px; margin-bottom: 28px; }
/* stacked layout on all viewports */

.sector-card .overlay { position: absolute; inset: 0; padding: 14px 16px; color: #fff; background: linear-gradient( to top, rgba(0,0,0,.6), rgba(0,0,0,.0) 70% ); display: flex; flex-direction: column; justify-content: flex-end; }
.sector-card .title { font-weight: 800; letter-spacing: .04em; text-transform: uppercase; transform: translateY(0); transition: transform .7s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.sector-card .desc { margin-top: 2px; line-height: 1.35; max-height: 0; overflow: hidden; opacity: 0; transform: translateY(8px); transition: max-height .9s cubic-bezier(.2,.8,.2,1), opacity .65s ease-out, transform .7s cubic-bezier(.22,.61,.36,1); will-change: transform, opacity; }
.sector-card:hover .title,
.sector-card.is-hover .title { transform: translateY(-6px); }
.sector-card:hover .desc,
.sector-card.is-hover .desc { max-height: 260px; opacity: 1; transform: translateY(-4px); }
/* Brand logo */
.brand-logo { height: 36px; width: auto; display: block; }
@media (max-width: 960px) { .brand-logo { height: 22px; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Hero logo */
.hero-logo { max-width: 360px; width: 60%; height: auto; display: block; margin: 0 0 16px 0; }
@media (max-width: 640px) { .hero-logo { width: 80%; max-width: 300px; } }
/* Dark hero for logo contrast */
.hero.light { background: var(--color-invert-bg); color: var(--color-invert-fg); }
.hero.light p { color: rgba(255,255,255,0.75); }
.hero.light .badge { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.8); }
/* Home hero: make video section taller via responsive padding */
body[data-page="home"] .hero.light { padding-top: 96px; padding-bottom: 72px; }
@media (max-width: 960px){ body[data-page="home"] .hero.light { padding-top: 80px; padding-bottom: 56px; } }
/* Mobile: keep hero/video area stable during typewriter (prevents height jitter) */
@media (max-width: 640px){
  body[data-page="home"] .hero.light{
    min-height: clamp(520px, 78vh, 760px);
  }
}


/* Dropdown */
.main-nav { position: relative; }
.main-nav > a, .main-nav .has-dropdown { text-transform: uppercase; letter-spacing: .05em; }
.main-nav .dropdown { display: none; position: absolute; top: calc(100% + 18px); background: #ffffff; border: 1px solid var(--color-line); border-radius: 4px; box-shadow: var(--shadow-md); padding: 8px; min-width: 220px; }
.main-nav .has-dropdown-wrap { position: relative; }
.main-nav .has-dropdown-wrap .dropdown { top: calc(100% + 30px); }
.main-nav .dropdown a { display: block; color: var(--color-fg); padding: 8px 10px; border-radius: 4px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: 12.5px; }
.main-nav .dropdown a:hover { background: #f5f5f5; text-decoration: none; }
.main-nav .dropdown:hover { /* hover ile açılmasın */ }
@media (max-width: 1024px) {
  .main-nav .dropdown { position: static; display: none; box-shadow: none; border: none; padding: 4px 0; }
  .main-nav.open .dropdown { display: none; }
}


/* Dropdown positioning scoped to its wrapper */
.main-nav { position: relative; }
.main-nav .nav-item { position: relative; display: inline-block; }
.main-nav .has-dropdown-wrap .dropdown { left: 0; right: auto; top: 100%; }
.main-nav .has-dropdown-wrap:hover .dropdown { /* hover disabled */ }

/* Dropdown hover gap fix */
.main-nav .has-dropdown-wrap { position: relative; display: inline-block; }
.main-nav .has-dropdown-wrap > .has-dropdown { display: inline-flex; align-items: center; gap: 6px; }
/* Only hide ::after in desktop hover-gap shim rules (mobile drawer uses ::after for chevron) */
@media (min-width: 1025px){
  .main-nav .has-dropdown-wrap > .has-dropdown::after { display: none; }
  .main-nav .has-dropdown-wrap.open > .has-dropdown::after,
  .main-nav .has-dropdown-wrap:hover > .has-dropdown::after { display: none; }
}
.main-nav .has-dropdown-wrap:hover > .has-dropdown::before,
.main-nav .has-dropdown-wrap.open > .has-dropdown::before,
.main-nav .has-dropdown-wrap:focus-within > .has-dropdown::before { transform: scaleX(1); }
.main-nav .has-dropdown-wrap:hover > .has-dropdown,
.main-nav .has-dropdown-wrap.open > .has-dropdown,
.main-nav .has-dropdown-wrap:focus-within > .has-dropdown { color: var(--color-accent); }
.main-nav .has-dropdown-wrap .dropdown { top: calc(100% + 14px); left: 0; z-index: 900; margin-top: 0; }
.main-nav .has-dropdown::before { z-index: 950; }
.main-nav .has-dropdown-wrap:hover .dropdown,
.main-nav .has-dropdown-wrap:focus-within .dropdown,
.main-nav .dropdown:hover { display: block; }


/* Dropdown open state */
.has-dropdown-wrap .dropdown { display: none; }
.has-dropdown-wrap.open .dropdown { display: block; }
/* Dropdown animation (modern) */
.has-dropdown-wrap .dropdown {
  display: none; /* closed by default; open state controls visibility */
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms ease, transform 200ms ease;
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(180%) blur(8px);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
  z-index: 1000; /* ensure on top */
}
.has-dropdown-wrap.open .dropdown {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  pointer-events: auto;
}
/* Desktop: enable hover reveal (mobile remains click-only) */
@media (min-width: 1025px){
  .has-dropdown-wrap:hover .dropdown,
  .has-dropdown-wrap:focus-within .dropdown {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  /* Restore classic offset so it doesn't overlap the red underline */
  .main-nav .has-dropdown-wrap .dropdown { top: calc(100% + 14px) !important; margin-top: 0 !important; }
  /* Hover bridge: keep parent hovered while moving into dropdown */
  .has-dropdown-wrap { position: relative; }
  .has-dropdown-wrap::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    height: 14px; /* invisible hover buffer matches dropdown gap */
  }
}

/* Mobile: dropdowns must NOT open on hover (click-only via .open) */
@media (max-width: 1024px){
  .main-nav .has-dropdown-wrap:hover .dropdown { display: none !important; }
  .main-nav .has-dropdown-wrap.open .dropdown { display: block !important; }

  /* Language dropdown: same open behavior (fallback) */
  .main-nav .lang .lang-menu { display: none; }
  .main-nav .lang.open .lang-menu { display: block !important; }

  /* Mobile: never turn nav texts red */
  .main-nav a.active,
  .main-nav a[aria-current],
  .main-nav a[aria-current="page"],
  .main-nav a.active:hover,
  .main-nav a.active:focus-visible,
  /* also neutralize page-scoped active styling on dropdown headers */
  body[data-page] .main-nav .has-dropdown-wrap:first-of-type > .has-dropdown,
  body[data-page] .main-nav .has-dropdown-wrap:nth-of-type(2) > .has-dropdown {
    color: var(--color-fg) !important;
  }

  .main-nav a:hover,
  .main-nav a:focus-visible,
  .main-nav .has-dropdown:hover,
  .main-nav .has-dropdown-wrap:hover > .has-dropdown,
  .main-nav .has-dropdown-wrap.open > .has-dropdown,
  .main-nav .dropdown a:hover,
  .main-nav .dropdown a:focus-visible,
  .main-nav .dropdown button:hover,
  .main-nav .dropdown button:focus-visible {
    color: var(--color-fg) !important;
    text-decoration: none !important;
  }
}
/* Optional caret */
.has-dropdown-wrap { position: relative; }
.has-dropdown-wrap::after { display: none !important; }

/* Desktop chevron for top nav dropdown triggers (Kurumsal / Kabiliyetler) */
@media (min-width: 1025px){
  .main-nav .has-dropdown-wrap > .has-dropdown{
    display: inline-flex;
    align-items: center; /* ensures chevron is vertically centered to text */
    gap: 8px;
    padding-right: 12px; /* keep some breathing room */
  }
  .main-nav .has-dropdown-wrap > .has-dropdown::after{
    content: "";
    position: relative;
    display: inline-block !important;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg); /* down */
    transition: transform 260ms cubic-bezier(.2,.9,.2,1), opacity 200ms ease;
    will-change: transform;
    opacity: 0.9;
  }
  .main-nav .has-dropdown-wrap.open > .has-dropdown::after{
    transform: rotate(-135deg); /* up */
  }
  .main-nav .has-dropdown-wrap:hover > .has-dropdown::after,
  .main-nav .has-dropdown-wrap:focus-within > .has-dropdown::after{
    transform: rotate(-135deg); /* up */
  }
}

@media (max-width: 1024px) {
  .main-nav .dropdown {
    position: static;
    display: none; /* kapalı başlasın */
    background: #f5f5f5; /* gri arkaplan; içerik boşlukları da gri olsun */
    box-shadow: none;
    backdrop-filter: none;
    border: none;
    padding: 0; /* alt/üst boşlukta beyaz görünmesin */
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
  }
  .has-dropdown-wrap.open .dropdown { display: block; }
  .has-dropdown-wrap::after { display: none; }

  /* 1024px dahil: dropdown açılınca menü aşağı iten accordion gibi davransın */
  .main-nav .nav-item,
  .main-nav .has-dropdown-wrap { display: block !important; width: 100% !important; }
}
/* Mobile refinements */
@media (max-width: 640px) {
  .container { padding: 0 16px; }
  .site-header .bar { height: 60px; }
  .hero { padding: 48px 0 24px; }
  .section { padding: 48px 0; }
  .section-title { font-size: 26px; }
  .hero p { font-size: 16px; }
}
/* Language selector */
.lang-select { height: 36px; border-radius: 8px; border: 1px solid var(--color-line); padding: 0 8px; background: #fff; color: var(--color-fg); }
@media (max-width: 960px) { .lang-select { height: 34px; } }


/* Language dropdown */
.lang { position: relative; margin-left: 10px; }
.lang-btn { height: 36px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--color-line); background:#fff; cursor:pointer; }
.lang-menu { position: absolute; right: 0; top: 44px; background:#fff; border:1px solid var(--color-line); border-radius:10px; box-shadow: var(--shadow-md); padding:6px; display:none; min-width:120px; z-index:1000; }
.lang.open .lang-menu { display:block; }
.lang-menu button { display:block; width:100%; text-align:left; padding:8px 10px; background:transparent; border:none; border-radius:6px; cursor:pointer; }
.lang-menu button:hover { background:#f5f5f5; }
@media (max-width: 960px){ .lang-btn{height:34px;} .lang-menu{top:40px;} }
/* Modern language switcher */
.lang { position: relative; margin-left: 10px; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px;
  border-radius: 6px; border: 1px solid var(--color-line);
  background: #fff; color: var(--color-fg); font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: background .15s ease, box-shadow .15s ease, transform .12s ease;
}
.lang-btn::after {
  content: ''; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #999;
}
.lang-btn:hover { background: #f7f7f7; box-shadow: 0 2px 8px rgba(0,0,0,.06); transform: translateY(-1px); }
.lang.open .lang-btn { background: #f7f7f7; }

.lang-menu {
  position: absolute; right: 0; top: 44px; min-width: 140px;
  border-radius: 12px; border: 1px solid var(--color-line);
  background: rgba(255,255,255,0.95);
  backdrop-filter: saturate(180%) blur(8px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  padding: 6px;
  display: block; opacity: 0; transform: translateY(8px) scale(.98);
  visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, transform .2s ease;
  z-index: 1000;
}
.lang.open .lang-menu { opacity: 1; transform: translateY(0) scale(1); visibility: visible; pointer-events: auto; }
.lang-menu button { display:block; width:100%; text-align:left; padding:10px 12px; border:none; background:transparent; border-radius:8px; cursor:pointer; font-weight:600; }
.lang-menu button:hover { background:#f2f2f2; }

@media (max-width: 960px){
  .lang-btn { height: 34px; }
  .lang-menu { top: 40px; backdrop-filter: none; box-shadow: 0 8px 20px rgba(0,0,0,.1); }
}

.map-embed { width: 100%; height: 420px; border: 1px solid var(--color-line); border-radius: var(--radius); }
@media (max-width: 640px) { .map-embed { height: 300px; } }
/* Dropdown slide-down animation refinement */
.has-dropdown-wrap .dropdown { transform-origin: top; transform: translateY(-6px) scaleY(0.85); }
.has-dropdown-wrap.open .dropdown,
.has-dropdown-wrap:hover .dropdown,
.has-dropdown-wrap:focus-within .dropdown { transform: translateY(0) scaleY(1); }
/* Dropdown stagger (ladder) animation */
.has-dropdown-wrap .dropdown a {
  will-change: opacity;
  opacity: 0;
  transform: none;
  transition: opacity 160ms ease, background 160ms ease;
}
.has-dropdown-wrap.open .dropdown a,
.has-dropdown-wrap:hover .dropdown a,
.has-dropdown-wrap:focus-within .dropdown a {
  opacity: 1;
}
/* Ensure no vertical shift on hover */
.main-nav .dropdown a { line-height: 1.2; }
.main-nav .dropdown a:hover { transform: none; }
.has-dropdown-wrap .dropdown a:nth-of-type(1) { transition-delay: 40ms; }
.has-dropdown-wrap .dropdown a:nth-of-type(2) { transition-delay: 80ms; }
.has-dropdown-wrap .dropdown a:nth-of-type(3) { transition-delay: 120ms; }
.has-dropdown-wrap .dropdown a:nth-of-type(4) { transition-delay: 160ms; }
.has-dropdown-wrap .dropdown a:nth-of-type(5) { transition-delay: 200ms; }
@media (max-width: 960px) {
  .has-dropdown-wrap .dropdown a {
  will-change: opacity, transform; opacity: 1; transform: none; transition: none; }
}


/* Tabs (Capabilities) */
.tabs { }
.tablist { display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--color-line); margin-bottom: 16px; }
.tab { appearance: none; border: 1px solid var(--color-line); background: #fff; color: var(--color-fg); padding: 10px 14px; border-radius: 999px; font-weight: 600; cursor: pointer; transition: background .15s ease, transform .12s ease; }
.tab:hover { background: #f7f7f7; transform: translateY(-1px); }
.tab[aria-selected="true"] { background: #0a0a0a; color: #fff; border-color: #0a0a0a; }
.tabpanels { }
.tabpanel { display: none; }
.tabpanel.active { display: block; }


/* Tab panel transition */
.tabpanel { opacity: 0; transform: translateY(8px); transition: opacity 200ms ease, transform 240ms ease; }
.tabpanel.active { opacity: 1; transform: translateY(0); }


/* Social icons */
.socials { display: flex; gap: 10px; align-items: center; }
.social { display: inline-flex; flex-direction: row; width: auto; height: 36px; border: 1px solid var(--color-line); border-radius: 999px; align-items: center; justify-content: flex-start; background: #fff; color: var(--color-fg); transition: transform .12s ease, background .15s ease; }
.social:hover { transform: translateY(-2px); background: #f7f7f7; text-decoration: none; }
.social svg { width: 18px; height: 18px; fill: currentColor; margin-right: 6px; display:block; }

.social.labeled { width: auto; padding: 0 12px; gap: 8px; }
.social.labeled span { font-weight: 600; font-size: 14px; }


/* Equal height columns for contact page */
.grid.align-stretch { align-items: stretch; }
.card.full { height: 100%; display: flex; flex-direction: column; }
.card.full > .map-embed { flex: 1 1 auto; }
.map-embed { width: 100%; height: auto; min-height: 420px; border: 0; border-radius: inherit; display: block; }


/* Equal height without structural changes */
.grid.equal > div { display: flex; }
.grid.equal > div > .map-embed, .grid.equal > div > .card { flex: 1 1 auto; }
.grid.align-center { align-items: center; }
.flow-equal.vcenter > div { justify-content: center; }

/* Contact page: prevent horizontal scrolling on phones (map, long address, social buttons) */
@media (max-width: 640px){
  body[data-page="contact"] .grid.equal > div{
    min-width: 0; /* allow flex children to shrink instead of overflowing */
  }
  body[data-page="contact"] .map-embed{
    width: 100% !important;
    max-width: 100%;
    display: block;
  }
  body[data-page="contact"] .socials{
    flex-wrap: wrap;
  }
  body[data-page="contact"] .card .list span{
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

.button.outline-white { background:#ffffff; color:#0a0a0a; border-color:#ffffff; }
.button.outline-white:hover,
.button.outline-white.is-hover { transform: translateY(-1px); }

/* Homepage hero CTA: slightly sharper corners */
.hero .actions .button.outline-white { border-radius: 6px; }

/* Homepage hero CTA: center text normally; on hover, text shifts left and arrow appears */
.hero .actions .button.outline-white { position: relative; justify-content: center; transition: transform .22s ease, padding .22s ease; will-change: transform, padding; }
.hero .actions .button.outline-white::after {
  content: '→';
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%) translateX(-6px);
  opacity: 0; transition: opacity .2s ease;
}
/* Keep button in place; only adjust inner spacing to bias text slightly left */
.hero .actions .button.outline-white:hover,
.hero .actions .button.outline-white.is-hover { transform: translateY(-1px) scale(1.04); padding-left: 14px; padding-right: 36px; }
.hero .actions .button.outline-white:hover::after,
.hero .actions .button.outline-white.is-hover::after { opacity: 1; animation: homeCtaArrow 900ms ease-in-out infinite; }
@keyframes homeCtaArrow { 0%, 100% { transform: translateY(-50%) translateX(0); } 50% { transform: translateY(-50%) translateX(6px); } }

/* Contact page: make "Haritada Aç" behave the same as homepage CTA */
body[data-page="contact"] a.button.secondary[data-i18n="contact.openMaps"] { position: relative; justify-content: center; transition: transform .22s ease, padding .22s ease; will-change: transform, padding; }
body[data-page="contact"] a.button.secondary[data-i18n="contact.openMaps"]::after {
  content: '→';
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%) translateX(-6px);
  opacity: 0; transition: opacity .2s ease;
}
body[data-page="contact"] a.button.secondary[data-i18n="contact.openMaps"]:hover,
body[data-page="contact"] a.button.secondary[data-i18n="contact.openMaps"].is-hover {
  transform: translateY(-1px) scale(1.04);
  padding-left: 14px; padding-right: 36px;
}
body[data-page="contact"] a.button.secondary[data-i18n="contact.openMaps"]:hover::after,
body[data-page="contact"] a.button.secondary[data-i18n="contact.openMaps"].is-hover::after { opacity: 1; animation: homeCtaArrow 900ms ease-in-out infinite; }


/* Corporate hover animation for feature cards under Neden PROMET */
.feature-card { position: relative; overflow: hidden; transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
.feature-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(1200px 400px at 0% 0%, rgba(0,0,0,0.04), transparent 60%); opacity: 0; transform: scale(0.96); transition: opacity 300ms ease, transform 300ms ease; pointer-events: none; }
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #dcdcdc; }
.feature-card:hover::after { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .feature-card, .feature-card::after { transition: none; }
}


/* Badge colors for Neden PROMET feature cards on homepage */
/* 1. Kalite */
.hero ~ .section .grid.cols-4 .feature-card:nth-of-type(1) .badge { background:#1F3A93; color:#ffffff; border-color:#1F3A93; }
/* 2. Teknoloji */
.hero ~ .section .grid.cols-4 .feature-card:nth-of-type(2) .badge { background:#3498DB; color:#ffffff; border-color:#3498DB; }
/* 3. Teslimat */
.hero ~ .section .grid.cols-4 .feature-card:nth-of-type(3) .badge { background:#F39C12; color:#ffffff; border-color:#F39C12; }
/* 4. Ortaklık */
.hero ~ .section .grid.cols-4 .feature-card:nth-of-type(4) .badge { background:#27AE60; color:#ffffff; border-color:#27AE60; }

/* Hide page titles on inner pages (keep homepage) */
body:not([data-page="home"]) .hero h1 { display: none; }


/* Minimal footer strip */
.site-footer { border-top: none; }
.site-footer .top { display: none !important; }
.site-footer .bottom { text-align: left; background: var(--color-invert-bg); color: var(--color-invert-fg); border-top: none; padding: 8px 0; text-align: center; font-size: 13px; }
.site-footer .bottom .container { display: flex; justify-content: flex-start; }


/* Footer left align override */
.site-footer .bottom { text-align: left !important; }
.site-footer .container.bottom { display: flex; justify-content: flex-start; }


/* Bottom brand block (logo | divider | tagline) — used on all pages */
.about-tail { padding-top: 24px; padding-bottom: 36px; }
.about-tail .container { display:flex; justify-content:flex-start; }
.about-tail-wrap { display:flex; align-items:center; justify-content:flex-start; gap:16px; }
.about-tail-logo { height: 30px; width: auto; display:block; }
.about-tail-divider { width: 1px; height: 26px; background: #999; display:inline-block; }
.about-tail-text { font-weight: 600; letter-spacing: .01em; }

/* All pages (except home): on small phones (320/375), stack logo + divider + tagline vertically; divider becomes horizontal */
@media (max-width: 420px){
  body:not([data-page="home"]) .about-tail .container { display:flex; justify-content:center; }
  body:not([data-page="home"]) .about-tail-wrap{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
  }
  body:not([data-page="home"]) .about-tail-divider{
    width: min(220px, 70vw);
    height: 1px;
  }
  body:not([data-page="home"]) .about-tail-text{
    max-width: 92vw;
    padding: 0 10px;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 13.5px;
    line-height: 1.25;
  }
}

/* Home only: larger ref logo in about-tail */
body[data-page="home"] .about-tail-logo { height: 72px; }

/* Home only: background image from ref-logo area to page end */
body[data-page="home"] .home-floor {
  position: relative;
  background-image: url("../references/footer-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Make footer transparent on home so background shows */
body[data-page="home"] .home-floor .site-footer { background: transparent; }
body[data-page="home"] .home-floor .site-footer .top { background: transparent; }
body[data-page="home"] .home-floor .site-footer .bottom { background: var(--color-invert-bg); color: var(--color-invert-fg); }
/* Make the black bar span full viewport width */
body[data-page="home"] .home-floor .site-footer .container.bottom::before { display: none !important; }
/* Break out of centered container to span full viewport width */
body[data-page="home"] .home-floor .site-footer .container.bottom {
  max-width: none;
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 160px;
  padding-right: 24px;
  background: var(--color-invert-bg);
  display: flex;
  justify-content: flex-start;
}

/* Home only: stack brand row and contact content */
body[data-page="home"] .about-tail .about-tail-wrap { flex-direction: column; align-items: flex-start; gap: 32px; }
body[data-page="home"] .about-tail .tail-brand { display: flex; align-items: center; gap: 16px; }
body[data-page="home"] .about-tail-contact { font-size: 14px; color: var(--color-fg); }
body[data-page="home"] .about-tail-contact .list { border: none; list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
body[data-page="home"] .about-tail-contact .list li { border: none; display: flex; align-items: center; gap: 14px; }
body[data-page="home"] .about-tail-contact .list li a { color: inherit; text-decoration: none; transition: color .2s ease; }
body[data-page="home"] .about-tail-contact .list li a:hover,
body[data-page="home"] .about-tail-contact .list li a:focus-visible { color: #c40000; text-decoration: none; }
body[data-page="home"] .about-tail-contact .button.secondary { padding: 6px 22px; font-size: 13px; margin-top: 20px; border-radius: 6px; border: 1.5px solid #c40000; color: #c40000; background: transparent; transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease; }
body[data-page="home"] .about-tail-contact .button.secondary:hover,
body[data-page="home"] .about-tail-contact .button.secondary:focus-visible { background: #c40000; color: #ffffff; border-color: #c40000; box-shadow: 0 10px 30px rgba(196,0,0,.35); }
body[data-page="home"] .about-tail-contact .socials { margin-top: 8px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
body[data-page="home"] .about-tail-contact .list li > span:first-child { font-size: 22px; line-height: 1; }
body[data-page="home"] .about-tail-contact .list li .ci-ico { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; }
body[data-page="home"] .about-tail-contact .list li .ci-ico svg { width: 100%; height: 100%; display:block; }
body[data-page="home"] .about-tail-contact .list li .ci-ico { color: #c40000; }

/* Home footer contact block: center logo + contact info on small phones (iPhone SE etc.) */
@media (max-width: 480px){
  body[data-page="home"] .about-tail .container { justify-content: center; }
  body[data-page="home"] .about-tail .about-tail-wrap { align-items: center !important; text-align: center; }
  body[data-page="home"] .about-tail .tail-brand { width: 100%; justify-content: center; }

  body[data-page="home"] .about-tail-contact {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* Keep the whole group centered, but align icons + text in consistent columns */
  body[data-page="home"] .about-tail-contact .list {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    justify-items: start;
  }
  body[data-page="home"] .about-tail-contact .list li {
    display: grid;
    grid-template-columns: 28px 1fr; /* icon column + text column */
    align-items: start;
    column-gap: 12px;
    justify-content: start;
    text-align: left;
  }
  body[data-page="home"] .about-tail-contact .list li .ci-ico {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  body[data-page="home"] .about-tail-contact .list li a {
    text-align: left;
    overflow-wrap: anywhere; /* prevent overflow on 320px */
  }
  body[data-page="home"] .about-tail-contact .button.secondary { align-self: center; }
}

/* Mobile footer: keep copyright in ONE line (esp. iPhone SE 320px) */
@media (max-width: 480px){
  .site-footer .bottom { padding: 10px 0 12px; }
  .site-footer .container.bottom { justify-content: center !important; }
  .site-footer .container.bottom > div{
    white-space: nowrap;
    font-size: 10.5px;
    letter-spacing: 0;
  }

  /* Home has extra left padding on the black bar; remove it on phones so text can fit */
  body[data-page="home"] .home-floor .site-footer .container.bottom{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}
/* iPad / tablets (768px): center copyright text inside the black bar */
@media (min-width: 481px) and (max-width: 820px){
  .site-footer .bottom{ text-align: center !important; }
  .site-footer .container.bottom{ justify-content: center !important; }
  /* Home uses a full-width black bar with asymmetric padding; neutralize on tablets so centering is real */
  body[data-page="home"] .home-floor .site-footer .container.bottom{
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}
/* iPad Pro / large tablets (1024px): same centering rules */
@media (min-width: 821px) and (max-width: 1024px){
  .site-footer .bottom{ text-align: center !important; }
  .site-footer .container.bottom{ justify-content: center !important; }
  body[data-page="home"] .home-floor .site-footer .container.bottom{
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* Flow section equal height (text and image bottoms aligned) */
.flow-equal { align-items: stretch; }
.flow-equal > div { display: flex; flex-direction: column; }
.flow-equal img.media, .flow-equal .media { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
@media (max-width: 960px) {
  .flow-equal > div { display: block; }
  .flow-equal img.media, .flow-equal .media { height: auto; aspect-ratio: 16 / 9; }
}


/* Capabilities page: bring tabs higher */
body[data-page="capabilities"] .hero { padding-bottom: 12px; }
body[data-page="capabilities"] .section:first-of-type { padding-top: 16px; }
body[data-page="capabilities"] .tabs .tablist { margin-top: 0; padding-bottom: 10px; }


/* Capabilities: move tabs to very top */
body[data-page="capabilities"] .hero { display: none !important; }
body[data-page="capabilities"] .section:first-of-type { padding-top: 0 !important; }


/* Capabilities tab panels: equalize text and image column heights */
body[data-page="capabilities"] .tabpanels .grid.cap-equal { align-items: stretch; }
body[data-page="capabilities"] .tabpanels .grid.cap-equal > div { display: flex; flex-direction: column; }
body[data-page="capabilities"] .tabpanels .grid.cap-equal .media, 
body[data-page="capabilities"] .tabpanels .grid.cap-equal img.media { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 960px) {
  body[data-page="capabilities"] .tabpanels .grid.cap-equal > div { display: block; }
  body[data-page="capabilities"] .tabpanels .grid.cap-equal .media, 
  body[data-page="capabilities"] .tabpanels .grid.cap-equal img.media { height: auto; }
}


/* Stronger override to equalize media heights inside capabilities panels */
body[data-page="capabilities"] .tabpanels .grid.cap-equal > div > .media { flex: 1 1 auto; height: 100%; aspect-ratio: auto; }


/* Lazer Kesim tab: make the two media blocks the same size on desktop */
@media (min-width: 961px) {
  body[data-page="capabilities"] #tab-lazer .grid.cap-equal .media,
  body[data-page="capabilities"] #tab-lazer .grid.cap-equal img.media { height: 320px; width: 100%; object-fit: cover; }
}


/* Capabilities split layout (alternating image/text) */
body[data-page="capabilities"] .cap-split { align-items: stretch; }
body[data-page="capabilities"] .cap-split > .media-col, 
body[data-page="capabilities"] .cap-split > .text-col { display: flex; flex-direction: column; }
@media (min-width: 961px) {
  body[data-page="capabilities"] .cap-split.reverse .media-col { order: 2; }
  body[data-page="capabilities"] .cap-split.reverse .text-col { order: 1; }
}


/* Capabilities: uniform media heights across all tabs */
@media (min-width: 961px) {
  body[data-page="capabilities"] .cap-split .media,
  body[data-page="capabilities"] .cap-split img.media { height: 340px !important; width: 100%; object-fit: cover; }
}

body[data-page="capabilities"] .cap-split + .cap-split { margin-top: 16px; }

/* Capability detail pages: optional smaller media */
body[data-page="capabilities"] .detail-media-small { width: 80% !important; height: auto !important; aspect-ratio: auto !important; display: block; margin-left: auto; }
@media (max-width: 960px){ body[data-page="capabilities"] .detail-media-small { width: 100% !important; } }

.media-stack { display: grid; gap: 16px; }


/* About page: equalize about text card and stacked images */
body[data-page="about"] .about-equal { align-items: center; }
body[data-page="about"] .about-equal > div { display: flex; align-items: center; }
body[data-page="about"] .about-equal > div > .card { height: 100%; display: flex; flex-direction: column; }
body[data-page="about"] .about-equal .media-stack { height: 100%; display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
body[data-page="about"] .about-equal .media-stack .media, 
body[data-page="about"] .about-equal .media-stack img.media { width: 100%; height: 100%; object-fit: cover; }


/* About long text: indent first line by two characters */
body[data-page="about"] .about-equal .card p { text-indent: 2ch; }


/* About page: center VM title with thin lines to sides */
body[data-page="about"] .vm-section .vm-wrap .section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}
body[data-page="about"] .vm-section .vm-wrap .section-title::before,
body[data-page="about"] .vm-section .vm-wrap .section-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-line);
}
/* Hero background video */
.hero { position: relative; overflow: hidden; }
.hero-video { position: absolute; inset: 0; z-index: 0; }
.hero-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.35)); }
.hero .container { position: relative; z-index: 1; }
/* Mobile: keep hero video visible (it is muted+playsinline in HTML) */
@media (max-width: 640px) {
  .hero-video { display: block; }
  /* Mobile crop to remove remaining black bars (letterbox) */
  .hero-video { overflow: hidden; }
  .hero-video video {
    transform: scale(1.38) translateY(-3%);
    transform-origin: center;
  }
}
/* iPad / small tablets: also crop a bit to avoid top/bottom black bars */
@media (min-width: 641px) and (max-width: 960px){
  body[data-page="home"] .hero-video { overflow: hidden; }
  body[data-page="home"] .hero-video video{
    transform: scale(1.48) translateY(-8%);
    transform-origin: center;
  }
}

/* About page corporate styling */
.breadcrumbs { padding: 16px 0 0; }
.breadcrumbs small { color: var(--color-muted); }
.breadcrumbs a { text-decoration: underline; }
.values .value-item { padding: 18px; text-align: left; }
.value-icn { width: 28px; height: 28px; border-radius: 50%; background:#0a0a0a; color:#fff; display:inline-flex; align-items:center; justify-content:center; margin-bottom:8px; }
.badge.dark { background:#0a0a0a; color:#fff; border-color:#0a0a0a; }
.certs { display:flex; gap:10px; flex-wrap:wrap;  justify-content:center; }

.certs .badge { padding: 10px 18px; border-radius: 999px; font-weight: 600; }

.about-heading { font-size: 18px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 8px 0; color: var(--color-fg); }

/* Reduce gap between VM section title and cards */
body[data-page="about"] .vm-wrap .section-title { margin-bottom: 8px; }
/* Pull VM section closer to previous block */
body[data-page="about"] .vm-wrap { margin-top: 0; }
/* Tighten gap between about main section and VM section */
body[data-page="about"] .about-main { padding-bottom: 44px; }
body[data-page="about"] .vm-section { padding-top: 4px; }

body[data-page="about"] .hero h1 { display: none !important; }



body[data-page="about"] .section.breadcrumbs { padding-top: 4px; padding-bottom: 8px; }

body[data-page="about"] .section:first-of-type { padding-top: 8px; }

body[data-page="about"] .hero.hero-gray {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  background: #252729;
  min-height: 16vh;
  padding: 8px 0;
}

/* About hero: background image */
body[data-page="about"] .hero.hero-gray { 
  background-image: url('../img/about-hero.webp');
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat; 
}

body[data-page="about"] .hero.hero-gray .container { width:100%; }

/* Fix: About gray hero visible, compact and darker */
body[data-page="about"] .hero.hero-gray {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  background: #252729;
  min-height: 16vh;
  padding: 8px 0;
}

/* History (Vizyon & Misyon) page: reuse gray hero styling */
body[data-page="history"] .hero.hero-gray {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  background: #252729;
  height: 16vh; /* explicit height for perfect vertical centering */
  min-height: 16vh;
  padding: 0; /* remove extra top/bottom space */
}
body[data-page="history"] .hero.hero-gray .container { display:flex; align-items:center; justify-content:flex-start; height:100%; text-align:left; }
body[data-page="history"] .hero.hero-gray .about-hero-title { color:#fff !important; font-size: clamp(36px, 5vw, 56px) !important; font-weight: 700; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; margin: 0; }
/* Texture overlay same as About */
body[data-page="history"] .hero.hero-gray { position: relative; }
body[data-page="history"] .hero.hero-gray::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.05) 1px, transparent 1px),
              linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1));
  background-size: 16px 16px;
  opacity: .5;
}
/* Unhide hero title for gray hero on inner pages */
body[data-page="about"] .hero.hero-gray h1,
body[data-page="history"] .hero.hero-gray h1 { display: block !important; }

/* History page fallback: apply gray hero even if hero-gray class missing */
body[data-page="history"] .hero {
  position: relative;
  background: #252729;
  height: 16vh;
  min-height: 16vh;
  padding: 0;
}
body[data-page="history"] .hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.05) 1px, transparent 1px),
              linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1));
  background-size: 16px 16px;
  opacity: .5;
}
body[data-page="history"] .hero .container { position: relative; z-index: 1; display: flex; align-items: center; justify-content:flex-start; height: 100%; text-align:left; }
body[data-page="history"] .hero h1 { display: block !important; color: #fff !important; font-size: clamp(36px, 5vw, 56px); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; margin: 0; line-height: 1.2; }
body[data-page="history"] .hero p { display: none; }



.about-hero-title { color:#fff !important; font-size: clamp(32px, 4.6vw, 52px); font-weight: 800; letter-spacing:.02em; line-height:1.1; text-transform: uppercase; margin:0; position:relative; z-index:1; }

/* Unhide hero title on contact page */
body[data-page="contact"] .hero h1 { display: block !important; font-size: clamp(20px, 3.8vw, 30px); line-height: 1.2; margin-top: 0; margin-bottom: 0; }
body[data-page="contact"] .hero p.muted { margin: 0 0 2px 0; }
/* Contact: tighten gap between title and map */
body[data-page="contact"] .hero { padding-bottom: 4px; }
/* Apply to the section right after hero (map section) */
body[data-page="contact"] .hero + .section { padding-top: 6px !important; }

/* Policies page hero */
/* Capabilities page gray hero same as About */
body[data-page="capabilities"] .hero.hero-gray { display:flex !important; align-items:center; justify-content:flex-start; background:#252729; height:16vh; min-height:16vh; padding: 0; position: relative; }
body[data-page="capabilities"] .hero.hero-gray::before { content: ''; position:absolute; inset:0; background: radial-gradient(circle at center, rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)); background-size: 16px 16px; opacity: .5; }
body[data-page="capabilities"] .hero.hero-gray .about-hero-title { color:#fff !important; font-size: clamp(36px, 5vw, 56px) !important; font-weight: 700; transform: translateY(8px); }
body[data-page="capabilities"] .hero.hero-gray .container { display:flex; align-items:center; justify-content:flex-start; height:100%; }
body[data-page="capabilities"] .hero.hero-gray h1 { display:block !important; }
/* Page-specific hero images for capabilities section pages */
body[data-page="capabilities"] .hero.hero-gray.hero-uretim { background-image: url('../img/capabilities-hero.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; }
body[data-page="capabilities"] .hero.hero-gray.hero-hizmetler { background-image: url('../img/services-hero.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; }
body[data-page="capabilities"] .hero.hero-gray.hero-makina { background-image: url('../img/equipment-hero.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; }
body[data-page="policies"] .hero.hero-gray { display:flex !important; align-items:center; justify-content:flex-start; background:#252729; height:16vh; min-height:16vh; padding: 0; position: relative; }
body[data-page="policies"] .hero.hero-gray::before { content: ''; position:absolute; inset:0; background: radial-gradient(circle at center, rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)); background-size: 16px 16px; opacity: .5; }
body[data-page="policies"] .about-hero-title { color:#fff !important; font-weight:700; letter-spacing:.02em; text-transform: uppercase; }
body[data-page="policies"] .hero.hero-gray .container { display:flex; align-items:center; justify-content:flex-start; height:100%; }
/* Unhide hero title for policies gray hero */
body[data-page="policies"] .hero.hero-gray h1 { display:block !important; }

/* Policies: thin divider between policy blocks */
body[data-page="policies"] .policy-block + .policy-block {
  border-top: 1px solid var(--color-line);
  margin-top: 20px;
  padding-top: 20px;
}

/* President (Başkanın Mesajı) page hero — identical to policies */
body[data-page="president"] .hero.hero-gray { display:flex !important; align-items:center; justify-content:flex-start; background:#252729; height:16vh; min-height:16vh; padding: 0; position: relative; }
body[data-page="president"] .hero.hero-gray::before { content: ''; position:absolute; inset:0; background: radial-gradient(circle at center, rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)); background-size: 16px 16px; opacity: .5; }
body[data-page="president"] .about-hero-title { color:#fff !important; font-weight:700; letter-spacing:.02em; text-transform: uppercase; }
body[data-page="president"] .hero.hero-gray .about-hero-title { transform: translateY(8px); }
body[data-page="president"] .hero.hero-gray .container { display:flex; align-items:center; justify-content:flex-start; height:100%; }
body[data-page="president"] .hero.hero-gray h1 { display:block !important; }

/* References page hero — identical to policies */
body[data-page="references"] .hero.hero-gray { display:flex !important; align-items:center; justify-content:flex-start; background:#252729; height:16vh; min-height:16vh; padding: 0; position: relative; }
body[data-page="references"] .hero.hero-gray::before { content: ''; position:absolute; inset:0; background: radial-gradient(circle at center, rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)); background-size: 16px 16px; opacity: .5; }
body[data-page="references"] .about-hero-title { color:#fff !important; font-weight:700; letter-spacing:.02em; text-transform: uppercase; }
body[data-page="references"] .hero.hero-gray .about-hero-title { transform: translateY(8px); }
body[data-page="references"] .hero.hero-gray .container { display:flex; align-items:center; justify-content:flex-start; height:100%; }
body[data-page="references"] .hero.hero-gray h1 { display:block !important; }

/* Sector page hero — identical to policies/about gray hero */
body[data-page="sector"] .hero.hero-gray { display:flex !important; align-items:center; justify-content:flex-start; background:#252729; height:16vh; min-height:16vh; padding: 0; position: relative; }
body[data-page="sector"] .hero.hero-gray::before { content: ''; position:absolute; inset:0; background: radial-gradient(circle at center, rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)); background-size: 16px 16px; opacity: .5; }
body[data-page="sector"] .hero.hero-gray .container { display:flex; align-items:center; justify-content:flex-start; height:100%; }
body[data-page="sector"] .hero.hero-gray .about-hero-title {
  color:#fff !important;
  font-weight:700;
  letter-spacing:.02em;
  text-transform: uppercase;
  transform: none;
  /* Long titles (e.g. "HAVACILIK VE YER HİZMETLERİ") should fit on the hero image */
  max-width: min(92vw, 980px);
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.05;
  font-size: clamp(22px, 3.6vw, 44px);
}
@media (max-width: 640px){
  body[data-page="sector"] .hero.hero-gray .about-hero-title{
    font-size: clamp(18px, 4.6vw, 30px);
  }
}
/* Smaller FR title on aviation to keep one line */
html[lang="fr"] body[data-page="sector"] .hero.hero-gray.hero-havacilik .about-hero-title { font-size: clamp(22px, 3.2vw, 34px); }
/* Aviation (TR/EN): slightly smaller so it never overflows */
body[data-page="sector"] .hero.hero-gray.hero-havacilik .about-hero-title { font-size: clamp(18px, 3.2vw, 34px); }
body[data-page="sector"] .hero.hero-gray h1 { display:block !important; }
/* Sector (İş Makinaları) hero background image */
/* Only apply this background on İş Makinaları page hero */
body[data-page="sector"] .hero.hero-gray.hero-is { background-image: url('../sectors/is-arkaplan.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; }
/* Only apply this background on Tarım Makinaları page hero */
body[data-page="sector"] .hero.hero-gray.hero-tarim { background-image: url('../sectors/tarim-arkaplan.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; }
/* Only apply this background on Raylı Sistemler page hero */
/* Only apply this background on İnşaat page hero */
body[data-page="sector"] .hero.hero-gray.hero-insaat { background-image: url('../sectors/insaat-arkaplan.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; }
/* Only apply this background on Savunma page hero */
body[data-page="sector"] .hero.hero-gray.hero-savunma {
  background-image: url('../sectors/otomotiv-arkaplan.jpg');
  background-repeat: no-repeat;
  /* Source image has top/bottom gray bars; crop them out via zoom */
  background-size: auto 420%;
  background-position: center 50%;
}
/* Only apply this background on Havacılık ve Yer Hizmetleri page hero */
body[data-page="sector"] .hero.hero-gray.hero-havacilik { background-image: url('../sectors/havacilik-arkaplan.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; }
/* Only apply this background on Diğer page hero */
body[data-page="sector"] .hero.hero-gray.hero-diger { background-image: url('../sectors/diger-arkaplan.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; }

/* Horizontal looping album at bottom of sector page */
body[data-page="sector"] .album-scroller { padding-top: 0; padding-bottom: 0; }
/* Pull scroller slightly closer to intro text */
body[data-page="sector"] .section + .album-scroller { margin-top: 0; margin-bottom: 44px; }
/* Remove extra bottom padding on first content section so intro centers between cards and gallery */
body[data-page="sector"] .hero + .section { padding-bottom: 0; }
body[data-page="sector"] .album-viewport { position: relative; overflow: hidden; border: 1px solid var(--color-line); border-radius: 10px; background: #fff; }
body[data-page="sector"] .album-track { display: inline-flex; align-items: center; gap: 12px; padding: 16px; animation: albumScroll 30s linear infinite; will-change: transform; }
body[data-page="sector"] .album-track img { height: 170px; aspect-ratio: 16 / 9; width: auto; display: block; border-radius: 8px; box-shadow: var(--shadow-sm); border: 1px solid var(--color-line); object-fit: cover; object-position: center; }
@media (min-width: 961px){ body[data-page="sector"] .album-track img { height: 200px; } }
@keyframes albumScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Home page – scrolling sectors strip under hero */
body[data-page="home"] .album-scroller { padding-top: 12px; padding-bottom: 0; }
/* The red SEKTÖRLER ribbon should NOT inherit .section 72px paddings; keep it flush */
body[data-page="home"] .album-scroller.sectors-ribbon-wrap { padding-top: 0; padding-bottom: 0; }
body[data-page="home"] .album-scroller > .container.scroller-wrap { max-width: none; padding-left: 0; padding-right: 0; }
body[data-page="home"] .album-viewport { position: relative; overflow: hidden; border: 0; border-radius: 0; background: transparent; }
body[data-page="home"] .album-track { display: inline-flex; align-items: stretch; gap: 0; padding: 16px; animation: albumScroll 30s linear infinite; will-change: transform; }
body[data-page="home"] .album-track .sector-card { flex: 0 0 auto; width: 320px; border-radius: 0; box-shadow: none; border: 1px solid var(--color-line); overflow: hidden; transition: box-shadow .25s ease; position: relative; z-index: 0; }
body[data-page="home"] .album-track .sector-card:hover { box-shadow: var(--shadow-sm); z-index: 2; }
@media (min-width: 961px){ body[data-page="home"] .album-track .sector-card { width: 380px; } }
/* Full-width red ribbon title above sectors scroller */
body[data-page="home"] .sectors-ribbon { background: #c40000; color: #fff; padding: 14px 0; }
body[data-page="home"] .sectors-ribbon .section-title { margin: 0; color: #fff; text-align: center; letter-spacing: 0.4px; font-size: clamp(22px, 3.2vw, 38px); }
/* Home sectors CTA */
body[data-page="home"] .sectors-cta { padding-top: 14px; padding-bottom: 24px; }
body[data-page="home"] .sectors-cta > .container { max-width: none; padding-left: 16px; padding-right: 16px; display: flex; align-items: center; justify-content: center; gap: 16px; }
body[data-page="home"] .sectors-cta > .container::before,
body[data-page="home"] .sectors-cta > .container::after { content: ""; flex: 1 1 0; height: 1px; background: var(--color-line); }
/* Home about block */
body[data-page="home"] .home-about .grid { align-items: center; column-gap: 36px; row-gap: 16px; }
/* Home About: ensure the left image block is vertically centered relative to the (often taller) text column */
@media (min-width: 641px){
  body[data-page="home"] .home-about .grid { align-items: stretch; }
  body[data-page="home"] .home-about .grid.cols-2 > div:first-child{
    display: flex;
    align-items: center; /* vertical centering (cross-axis) */
  }
}
@media (min-width: 961px){ body[data-page="home"] .home-about .grid { column-gap: 56px; } }
body[data-page="home"] .home-about .media { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--color-line); border-radius: 10px; box-shadow: var(--shadow-sm); display: block; }
/* About image rotator */
body[data-page="home"] .home-about .about-rotator { position: relative; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--color-line); border-radius: 6.5px; box-shadow: var(--shadow-sm); overflow: hidden; }
body[data-page="home"] .home-about .about-rotator .slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 600ms ease; display: block; }
body[data-page="home"] .home-about .about-rotator .slide.active { opacity: 1; }
body[data-page="home"] .home-about .section-title { font-size: clamp(22px, 3.2vw, 38px); text-align: center; }
body[data-page="home"] .home-about .about-head-wrap { max-width: none; padding-left: 0; padding-right: 0; }
body[data-page="home"] .home-about .about-head-wrap .section-header { display: flex; align-items: center; gap: 16px; }
body[data-page="home"] .home-about .about-head-wrap .section-header::before,
body[data-page="home"] .home-about .about-head-wrap .section-header::after { content: ""; flex: 1 1 0; height: 1px; background: var(--color-line); }
body[data-page="home"] .home-about .about-head-wrap .section-title { margin: 0; }
/* Increase spacing between HAKKIMIZDA title and content */
body[data-page="home"] .home-about .about-head-wrap { margin-bottom: 24px; }
@media (min-width: 961px){ body[data-page="home"] .home-about .about-head-wrap { margin-bottom: 36px; } }
/* Full-width three-image strip between About and Sectors */
body[data-page="home"] .home-triptych { width: 100%; padding: 0; margin: 8px 0 16px 0; }
body[data-page="home"] .home-triptych .triptych { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
body[data-page="home"] .home-triptych img { width: 100%; height: clamp(260px, 36vw, 520px); object-fit: cover; display: block; }
@media (max-width: 640px) {
  body[data-page="home"] .home-triptych .triptych { grid-template-columns: 1fr; }
  body[data-page="home"] .home-triptych img { height: auto; }
}
/* Triptych overlays */
body[data-page="home"] .home-triptych .tile { position: relative; }
body[data-page="home"] .home-triptych .triptych .triptych-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-decoration: none; }
body[data-page="home"] .home-triptych .triptych .badge { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border-radius: 0; background: none; color: #fff; backdrop-filter: none; box-shadow: none; border: none; transition: transform .18s ease; }
body[data-page="home"] .home-triptych .triptych .badge .ico { width: clamp(44px, 6vw, 96px); height: clamp(44px, 6vw, 96px); display: block; filter: none; opacity: 1; }
body[data-page="home"] .home-triptych .triptych .badge .label { font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: clamp(18px, 3.2vw, 36px); text-shadow: none; color: #fff; }
body[data-page="home"] .home-triptych .triptych .triptych-overlay { outline: none; }
body[data-page="home"] .home-triptych .triptych .triptych-overlay:focus { outline: none; }
body[data-page="home"] .home-triptych .triptych .triptych-overlay:hover .badge { transform: translateY(-2px); }
/* Full-width single image under triptych */
body[data-page="home"] .home-wideimg { width: 100%; padding: 0; margin: 0 0 16px 0; }
body[data-page="home"] .home-wideimg { position: relative; background:#000; }
body[data-page="home"] .home-wideimg img.wide { width: 100%; height: clamp(260px, 32vw, 480px); object-fit: cover; display: block; }
body[data-page="home"] .home-wideimg img.wide.base { transition: opacity .25s ease; opacity: 1; }
body[data-page="home"] .home-wideimg img.wide.overlay { position: absolute; inset: 0; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
/* Home certificate section */
body[data-page="home"] .home-cert .section-title { text-align: center; font-size: clamp(22px, 3.2vw, 38px); margin: 0; }
body[data-page="home"] .home-cert .cert-head-wrap { margin-bottom: 28px; }
@media (min-width: 961px){ body[data-page="home"] .home-cert .cert-head-wrap { margin-bottom: 44px; } }
/* Thin lines extending from both sides of the certificate title */
body[data-page="home"] .home-cert .cert-head-wrap .section-header { display: flex; align-items: center; gap: 16px; }
body[data-page="home"] .home-cert .cert-head-wrap .section-header::before,
body[data-page="home"] .home-cert .cert-head-wrap .section-header::after { content: ""; flex: 1 1 0; height: 1px; background: var(--color-line); }
body[data-page="home"] .home-cert .grid { column-gap: 20px; row-gap: 16px; }
@media (min-width: 961px){ body[data-page="home"] .home-cert .grid { column-gap: 32px; } }
/* Tighten paragraph spacing next to certificate image */
body[data-page="home"] .home-cert .cert-grid p { margin-top: 0; margin-bottom: 0; }
/* Ensure vertical centering between image and text */
body[data-page="home"] .home-cert .cert-grid { align-items: center; }
/* Center image + text as a group; columns size to content */
@media (min-width: 641px){ body[data-page="home"] .home-cert .cert-grid { grid-template-columns: auto auto; justify-content: center; } }
body[data-page="home"] .home-cert .cert-image { width: 100%; height: auto; max-width: 240px; border: 1px solid var(--color-line); border-radius: 8px; box-shadow: var(--shadow-sm); display: block; margin: 18px auto 0; }
@media (min-width: 961px){ body[data-page="home"] .home-cert .cert-text { max-width: 620px; } }
/* Increase vertical space of the white certificate section */
body[data-page="home"] .home-cert { padding-top: 56px; padding-bottom: 120px; }
@media (max-width: 640px){ body[data-page="home"] .home-cert { padding-top: 40px; } }
/* Overlay frames on top of wide image */
body[data-page="home"] .home-wideimg .frame-grid { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: 0; padding: clamp(12px, 4vw, 48px); box-sizing: border-box; }
body[data-page="home"] .home-wideimg .frame { position: relative; display: flex; align-items: center; justify-content: center; padding: 16px; width: clamp(120px, 18vw, 220px); aspect-ratio: 1 / 1; border: 1px solid rgba(255,255,255,0.65); color: #fff; text-decoration: none; font-weight: 300; letter-spacing: .02em; cursor: pointer; box-sizing: border-box; background: transparent; transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .3s ease; overflow: hidden; }
@media (min-width: 961px){ body[data-page="home"] .home-wideimg .frame { padding: 28px; } }
body[data-page="home"] .home-wideimg .frame .label { font-size: clamp(16px, 1.6vw, 24px); position: relative; z-index: 4; color: #ffffff; mix-blend-mode: normal; text-shadow: none; transition: color .22s ease; text-align: center; }
body[data-page="home"] .home-wideimg .frame:hover .label,
body[data-page="home"] .home-wideimg .frame.is-hover .label { color: #0a0a0a; }

/* iPhone 12/13/14 (~375px): slightly smaller frames + text */
@media (max-width: 412px) and (min-width: 361px){
  body[data-page="home"] .home-wideimg .frame-grid{
    flex-wrap: wrap;
    gap: 10px;
    align-content: center;
    padding: 12px;
  }
  body[data-page="home"] .home-wideimg .frame{
    width: auto; /* override clamp */
    flex: 0 0 calc(50% - 6px);
    max-width: calc(50% - 6px);
    padding: 12px;
  }
  body[data-page="home"] .home-wideimg .frame:nth-child(3){
    flex-basis: calc(50% - 6px); /* same size as others */
    max-width: calc(50% - 6px);
  }
  body[data-page="home"] .home-wideimg .frame .label{
    font-size: 15px;
    line-height: 1.15;
  }
}

/* iPhone Pro Max (~414px): frames should be adjacent + background image appears larger inside frames */
@media (min-width: 413px) and (max-width: 430px){
  body[data-page="home"] .home-wideimg{
    overflow: hidden;
    margin-bottom: 0; /* remove extra white gap before the sectors ribbon */
    position: relative;
    z-index: 0;
  }
  body[data-page="home"] .home-wideimg img.wide{
    height: 440px; /* more image under frames so they fit without pushing into SEKTÖRLER */
    transform: scale(1.12);
    transform-origin: center;
  }

  /* Tighten the spacing and keep the red ribbon above any overlays */
  body[data-page="home"] .home-wideimg + .album-scroller.sectors-ribbon-wrap{
    padding-top: 0;
    padding-bottom: 0;
  }
  body[data-page="home"] .sectors-ribbon{
    padding: 18px 0;
    position: relative;
    z-index: 2;
  }
  body[data-page="home"] .sectors-ribbon .section-title{
    line-height: 1.1;
  }

  /* Replace flex with grid for pixel-perfect adjacency */
  body[data-page="home"] .home-wideimg .frame-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto; /* prevent stretching that makes frames overflow vertically */
    gap: 0;
    padding: 0;
    align-content: center;
    justify-items: stretch;
  }
  body[data-page="home"] .home-wideimg .frame{
    width: 100%;
    max-width: none;
    padding: 12px;
    aspect-ratio: 1 / 1; /* keep frames square but controlled by available width */
    align-self: center;
  }
  /* 3rd item below, centered between the first two */
  body[data-page="home"] .home-wideimg .frame:nth-child(3){
    grid-column: 1 / span 2;
    justify-self: center;
    width: 50%;
    border-top: 0; /* avoid double border with row above */
  }
  body[data-page="home"] .home-wideimg .frame .label{
    font-size: 15px;
    line-height: 1.15;
  }
  /* Avoid double border between first row items */
  body[data-page="home"] .home-wideimg .frame:nth-child(2){
    border-left: 0;
  }
}

/* Very small phones (<=360 / iPhone SE 320px): avoid vertical overflow by using 2+1 layout and slightly taller image */
@media (max-width: 360px){
  body[data-page="home"] .home-wideimg img.wide{
    height: 340px; /* gives room for 2 rows of squares */
  }
  body[data-page="home"] .home-wideimg .frame-grid{
    flex-wrap: wrap;
    gap: 8px;
    align-content: center;
    padding: 10px;
  }
  body[data-page="home"] .home-wideimg .frame{
    width: auto; /* override clamp */
    flex: 0 0 calc(50% - 4px);
    max-width: calc(50% - 4px);
    padding: 10px;
  }
  body[data-page="home"] .home-wideimg .frame:nth-child(3){
    flex-basis: calc(50% - 4px);
    max-width: calc(50% - 4px);
  }
  body[data-page="home"] .home-wideimg .frame .label{
    font-size: 14px; /* prevent label wrap overflow */
    line-height: 1.15;
    letter-spacing: .01em;
  }
}
/* neon glow layer */
body[data-page="home"] .home-wideimg .frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(280px 220px at 25% 35%, rgba(196,0,0,.85), rgba(196,0,0,0) 62%),
  rgba(196,0,0, .18);
  opacity: 0; transition: opacity .28s ease, box-shadow .28s ease; z-index: 1; }
/* animated diagonal arrow */
body[data-page="home"] .home-wideimg .frame::before {
  content: ""; position: absolute; right: 14px; top: 16px; width: 16px; height: 16px; opacity: 0; pointer-events: none;
  background: url('../icons/arrow-diag.svg') no-repeat center / contain; transform-origin: 100% 0%;
  transition: opacity .2s ease, transform .28s ease; z-index: 3; }
@keyframes arrowNudge { 0%,100% { transform: translate(0,0); } 50% { transform: translate(3px,-3px); } }
/* hover state */
body[data-page="home"] .home-wideimg .frame:hover,
body[data-page="home"] .home-wideimg .frame.is-hover { background: #c40000; color: #ffffff; border-color: #c40000; box-shadow: 0 0 0 1px rgba(255,255,255,0) inset, 0 28px 95px rgba(196,0,0,.70), 0 0 140px rgba(196,0,0,.65); }
body[data-page="home"] .home-wideimg .frame:hover::after,
body[data-page="home"] .home-wideimg .frame.is-hover::after { opacity: 1; box-shadow: 0 36px 110px rgba(196,0,0,.60) inset, 0 36px 120px rgba(196,0,0,.58); }
body[data-page="home"] .home-wideimg .frame:hover::before,
body[data-page="home"] .home-wideimg .frame.is-hover::before { opacity: 1; animation: arrowNudge 900ms ease-in-out infinite; }
body[data-page="home"] .home-about .about-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
body[data-page="home"] .home-about .about-actions { align-items: center; gap: 12px; }
body[data-page="home"] .home-about .about-actions::before { content: ""; flex: 1 1 0; height: 1px; background: var(--color-line); }
body[data-page="home"] .home-about .about-actions .about-more { border-radius: 6px; border: 2px solid #c40000; color: #c40000; background: #fff; transition: transform .22s ease, background .22s ease, color .22s ease, box-shadow .22s ease, border-color .22s ease; }
body[data-page="home"] .home-about .about-actions .about-more:hover,
body[data-page="home"] .home-about .about-actions .about-more.is-hover { transform: translateY(-1px) scale(1.04); background: #c40000; color: #fff; border-color: #c40000; box-shadow: 0 10px 22px rgba(196,0,0,0.22); }

/* Mobile safety: prevent overlay frames from ever spilling into the next section */
@media (max-width: 480px){
  body[data-page="home"] .home-wideimg{ overflow: hidden; }
  body[data-page="home"] .home-wideimg img.wide{ height: 440px; }
}
/* Make the home sectors CTA behave like the hero CTA */
body[data-page="home"] .sectors-cta .button.outline-white { border-radius: 6px; position: relative; justify-content: center; transition: transform .22s ease, padding .22s ease, background .22s ease, color .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, padding; }
body[data-page="home"] .sectors-cta .button.outline-white::after { content: '→'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%) translateX(-6px); opacity: 0; transition: opacity .2s ease; }
body[data-page="home"] .sectors-cta .button.outline-white:hover,
body[data-page="home"] .sectors-cta .button.outline-white.is-hover { transform: translateY(-1px) scale(1.04); padding-left: 14px; padding-right: 36px; background: #c40000; color: #ffffff; border-color: #c40000; box-shadow: 0 10px 22px rgba(196,0,0,0.22); }
body[data-page="home"] .sectors-cta .button.outline-white:hover::after,
body[data-page="home"] .sectors-cta .button.outline-white.is-hover::after { opacity: 1; animation: homeCtaArrow 900ms ease-in-out infinite; }
/* Visible outline for home sectors CTA */
body[data-page="home"] .sectors-cta .button.outline-white { border-width: 2px; border-color: #c40000; color: #c40000; background: #fff; }

/* Home: make "Haritada Aç" (in the footer contact block) animate like hover when .is-hover is set */
body[data-page="home"] .about-tail-contact .button.secondary:hover,
body[data-page="home"] .about-tail-contact .button.secondary.is-hover {
  background: #c40000;
  color: #ffffff;
  border-color: #c40000;
  box-shadow: 0 10px 30px rgba(196,0,0,.35);
}

/* References grid and cards */
body[data-page="references"] .refs-grid { gap: 18px; }
/* Remove card styling completely; only gray logo blocks remain */
body[data-page="references"] .ref-card { display: contents; }
body[data-page="references"] .ref-card:hover { transform: none; box-shadow: none; border-color: transparent; text-decoration: none; }
body[data-page="references"] .ref-logo-wrap { width: 100%; aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; background: #f2f2f2; border: 1px solid var(--color-line); border-radius: 12px; overflow: hidden; }
body[data-page="references"] .ref-logo-wrap img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; filter: grayscale(0.1) contrast(1.1); transition: filter .2s ease, transform .2s ease; }
body[data-page="references"] .ref-card:hover .ref-logo-wrap img { filter: none; transform: scale(1.02); }
@media (max-width: 960px) {
  body[data-page="references"] .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body[data-page="references"] .grid.cols-4 { grid-template-columns: 1fr; }
}

/* References empty state center */
body[data-page="references"] .empty-ref { display: flex; align-items: center; justify-content: center; min-height: 28vh; }
body[data-page="references"] .empty-ref .button { margin-top: 4px; }
body[data-page="references"] .hero-logo { display: block; margin: 0 auto 40px auto; max-width: 340px; width: 52%; height: auto; }
body[data-page="references"] .ref-head { margin: 0 0 12px 0; font-size: clamp(22px, 3.6vw, 32px); line-height: 1.2; font-weight: 800; letter-spacing: .01em; }
body[data-page="references"] .ref-sub { margin: 0 0 14px 0; font-size: 18px; line-height: 1.6; color: var(--color-muted); font-weight: 400; }
body[data-page="references"] .ref-sep { width: min(720px, 80%); height: 1px; background: #999; margin: 40px auto 40px auto; }
/* References contact button accent */
body[data-page="references"] .empty-ref .button { background: #fff; border-color: #e80a00; color: #e80a00; box-shadow: 0 6px 18px rgba(232,10,0,0); transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .25s ease, transform .15s ease; border-radius: 4px; border-width: 2px; }
body[data-page="references"] .empty-ref .button:hover,
body[data-page="references"] .empty-ref .button.is-hover { transform: none; background: #e80a00; color: #fff; border-color: #e80a00; box-shadow: 0 12px 28px rgba(232,10,0,.25); }
body[data-page="references"] .empty-ref .button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(232,10,0,.25), 0 12px 28px rgba(232,10,0,.18); }
/* NDA / privacy note under button */
body[data-page="references"] .ref-nda { margin-top: 24px; display: flex; align-items: center; justify-content: center; gap: 12px; color: #6b7280; }
body[data-page="references"] .ref-nda .nda-pill { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border: 2px dashed #e2e8f0; border-radius: 999px; font-weight: 700; color: #6b7280; background: #f9fafb; }
body[data-page="references"] .ref-nda .nda-text { font-size: 15px; }

/* Policies top tabs styled like main nav */
body[data-page="policies"] .policies-nav { position: relative; display:flex; align-items:center; gap:8px; border-bottom: 1px solid var(--color-line); margin-bottom: 16px; }
body[data-page="policies"] .policies-nav .tab { position: relative; appearance:none; background: transparent; border:0; color: var(--color-fg); padding: 8px 12px; font-weight:700; font-size:13px; text-transform: uppercase; letter-spacing:.05em; cursor: pointer; }
/* override global tabs hover lift/background so underline hizası sabit kalsın */
body[data-page="policies"] .policies-nav .tab:hover { background: transparent; transform: none; }
body[data-page="policies"] .policies-nav .tab::after { content: ""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background: var(--color-accent); transform: scaleX(0); transform-origin: center; transition: transform 280ms ease; z-index: 1; }
body[data-page="policies"] .policies-nav .tab[aria-selected="true"]::after, 
body[data-page="policies"] .policies-nav .tab:hover::after { transform: scaleX(1); }
body[data-page="policies"] .policies-nav .tab[aria-selected="true"] { color: var(--color-accent); }
body[data-page="policies"] .policy-header { padding: 12px 0 0; }
body[data-page="policies"] .policy-title { margin: 0 0 10px 0; font-size: 22px; letter-spacing:.01em; }
/* Pull up the first content section under gray hero */
body[data-page="policies"] .hero + .section { padding-top: 48px; }
/* Reduce gap under the policies nav further */
body[data-page="policies"] .policies-nav { margin-top: 0; margin-bottom: 8px; }


/* About hero title – corporate, prominent */
.about-hero-title { color:#fff !important; font-size: clamp(32px, 4.6vw, 52px); font-weight: 800; letter-spacing:.02em; line-height:1.1; text-transform: uppercase; margin:0; position:relative; z-index:1; }
body[data-page="about"] .hero.hero-gray .container { display:flex; align-items:center; height:100%; }

body[data-page="about"] .hero.hero-gray .about-hero-title { color:#fff !important; font-size: clamp(36px, 5vw, 56px) !important; font-weight: 700; }

/* TURKAS page: full-height centered logo */
/* Ensure About hero shows background image (override later rules) */
body[data-page="about"] .hero.hero-gray {
  background-image: url('../img/about-hero.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Use same hero background on President, References and Policies pages */
body[data-page="president"] .hero.hero-gray,
body[data-page="references"] .hero.hero-gray,
body[data-page="policies"] .hero.hero-gray {
  background-image: url('../img/about-hero.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
body[data-page="turkas"] .turkas-center {
  min-height: calc(100vh - 68px - 46px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8vh 0 40px;
}
body[data-page="turkas"] .turkas-center .container { display:flex; align-items:center; justify-content:center; flex-direction: column; text-align: center; }
body[data-page="turkas"] .turkas-logo { width: min(300px, 50vw); height: auto; display:block; margin: 0 auto 14px; }
body[data-page="turkas"] .turkas-sep { width: min(520px, 68vw); height: 1px; background: #999; margin: 8px auto 0; }
body[data-page="turkas"] .turkas-desc { width: min(680px, 80vw); margin: 14px auto 0; text-align: center; color: var(--color-fg); font-size: clamp(16px, 2.6vw, 20px); line-height: 1.6; }