/* =====================================================================
   ACEKA HOLDING — theme overrides on top of the real BAUEN template CSS
   (wwwroot/Template/BAUEN/css/plugins.css + style.css).

   This file does NOT modify the vendor BAUEN files. It layers the
   approved Phase 4 design-system tokens on top, so BAUEN's structural/
   behavioral CSS (grid, carousel, waypoint reveal, etc.) keeps working
   unmodified and stays easy to upgrade later.
   ===================================================================== */

:root {
  /* COLOR — Phase 4 Section 2 */
  --aceka-navy-950: #0A1526;
  --aceka-navy-900: #0E1B33;
  --aceka-navy-800: #16253F;
  --aceka-blue-600: #1E3F7A;
  --aceka-blue-500: #2C5AAE;
  --aceka-blue-400: #5B84C9;
  --aceka-neutral-700: #4B5058;
  --aceka-neutral-500: #8A8F97;
  --aceka-neutral-300: #C8CBD0;
  --aceka-neutral-100: #EDEDE9;
  --aceka-warm-white: #F7F5F0;
  --aceka-white: #FFFFFF;

  /* TYPE — Phase 4 Section 3/4. BAUEN ships Oswald/Didact Gothic by
     default; overridden here per the approved design system. */
  --aceka-font-display: "Archivo", sans-serif;
  --aceka-font-body: "Inter", sans-serif;

  /* SPACE — Phase 4 Section 5 */
  --aceka-space-sm: 1rem;
  --aceka-space-md: 1.5rem;
  --aceka-space-lg: 2.5rem;
  --aceka-space-xl: 4rem;
  --aceka-space-section: clamp(5rem, 10vw, 10rem);

  /* MOTION — Phase 4 Section 22 */
  --aceka-motion-fast: 150ms;
  --aceka-motion-base: 300ms;
  --aceka-motion-slow: 500ms;
}

/* ---------------------------------------------------------------------
   Accent recolor — BAUEN's default accent is gold (#b19777), used on
   hovers, active states and form focus throughout style.css. ACEKA has
   no gold in its palette, so every instance is repointed to ACEKA blue
   here rather than edited in the vendor file.
   --------------------------------------------------------------------- */
b,
.section-padding h6,
.section-title span,
.services2 .services2-subtitle,
.services3-img-area,
.projects .item .con h6,
.projects .item .con h6 a,
.bauen-project-filter li.active,
.bauen-project-wrap p,
.bauen-project-link,
.team .info .social a {
  color: var(--aceka-blue-500) !important;
}
input:focus,
textarea:focus {
  border-color: var(--aceka-blue-500) !important;
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span,
.owl-theme .owl-nav [class*=owl-]:hover {
  border-color: var(--aceka-blue-500) !important;
}
.owl-theme .owl-nav [class*=owl-]:hover {
  color: var(--aceka-blue-500) !important;
}
.social-left li a:hover {
  color: var(--aceka-blue-500) !important;
  border-color: var(--aceka-blue-500) !important;
}

/* Navbar — toggler icon, active link, dropdown hover/active, both the
   transparent-over-hero state and the scrolled/.nav-scroll state. */
.navbar .navbar-toggler-icon,
.navbar .icon-bar,
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .active,
.navbar .navbar-nav .active i,
.navbar .dropdown-menu .dropdown:hover > .dropdown-item,
.navbar .dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu .dropdown-item:hover,
.nav-scroll .navbar-toggler-icon,
.nav-scroll .icon-bar,
.nav-scroll .navbar-nav .active,
.nav-scroll .navbar-collapse .active {
  color: var(--aceka-blue-500) !important;
}

/* Navbar/logo background — BAUEN defaults to a plain #272727 gray here;
   ACEKA uses the same navy as the footer so both dark bands read as one
   consistent site color instead of two different darks. */
.logo-wrapper,
.nav-scroll .logo-wrapper,
.nav-scroll,
.main-footer.dark {
  background: var(--aceka-navy-900) !important;
}

/* Several pages end on a dark section (.aceka-section--dark) right above
   the footer, which is the same navy — BAUEN's own footer border
   (rgba(255,255,255,0.05)) is too faint to read as a seam between two
   navy blocks, so the page content and the footer visually fuse into one
   slab. A visible accent-colored top border plus extra breathing room
   marks where the page ends and the footer begins, on every page since
   this is the shared footer partial. */
.main-footer.dark {
  border-top: 1px solid rgba(91, 132, 201, 0.35);
  padding-top: 4.5rem;
}

/* ---------------------------------------------------------------------
   Typography — apply ACEKA fonts on top of BAUEN's structural type rules
   --------------------------------------------------------------------- */
body {
  font-family: var(--aceka-font-body);
  background-color: var(--aceka-warm-white);
  color: var(--aceka-neutral-700);
}

h1, h2, h3, h4, h5, h6,
.section-title,
.aceka-display-xl,
.aceka-display-l {
  font-family: var(--aceka-font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--aceka-navy-900);
}

.aceka-eyebrow {
  font-family: var(--aceka-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--aceka-blue-500);
}

.aceka-display-xl {
  font-size: clamp(3.5rem, 8vw, 7rem);
  line-height: 1.02;
}

.aceka-display-l {
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1.05;
}

/* ---------------------------------------------------------------------
   Section rhythm — dark = statement, light = explanation (Phase 4 Sec.12)
   --------------------------------------------------------------------- */
.aceka-section--dark {
  background-color: var(--aceka-navy-900);
  color: var(--aceka-white);
}
.aceka-section--dark h1, .aceka-section--dark h2, .aceka-section--dark h3,
.aceka-section--dark .section-title { color: var(--aceka-white); }
.aceka-section--dark p { color: var(--aceka-neutral-300); }
.aceka-section--dark .section-title span { color: var(--aceka-blue-400); }

.aceka-section--light {
  background-color: var(--aceka-warm-white);
  color: var(--aceka-neutral-700);
}
.aceka-section--light .section-title span { color: var(--aceka-blue-500); }

.aceka-section-pad {
  padding-top: var(--aceka-space-section);
  padding-bottom: var(--aceka-space-section);
}

/* ---------------------------------------------------------------------
   Buttons — restrained ghost-outline, no pill/gradient (Phase 4 Sec.8)
   --------------------------------------------------------------------- */
.aceka-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.75rem;
  font-family: var(--aceka-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 2px;
  background: transparent;
  color: var(--aceka-navy-900);
  text-decoration: none;
  transition: background-color var(--aceka-motion-base) ease, color var(--aceka-motion-base) ease;
}
.aceka-btn:hover { background-color: var(--aceka-navy-900); color: var(--aceka-white); }

.aceka-btn--onDark { color: var(--aceka-white); }
.aceka-btn--onDark:hover { background-color: var(--aceka-white); color: var(--aceka-navy-900); }

.aceka-link-arrow {
  color: var(--aceka-blue-500);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.aceka-link-arrow i { transition: transform var(--aceka-motion-fast) ease; }
.aceka-link-arrow:hover i { transform: translateX(4px); }
.aceka-link-arrow:hover { color: var(--aceka-blue-600); }

/* ---------------------------------------------------------------------
   Hero — genuine BAUEN .header.slider-fade structure (see
   wwwroot/template/index.html); only the caption typography/color is
   ACEKA-specific, the slider mechanics are untouched vendor behavior.

   BAUEN's own .header .caption h1 rule (style.css) is sized for a short
   2-4 word tagline: fixed 48px + 15px letter-spacing + uppercase. ACEKA's
   hero title is a full sentence, so uppercase/letter-spacing must be
   reset here too, not just font-size — otherwise the long headline wraps
   across many lines and grows tall enough to run up behind the navbar.
   line-height is also looser than BAUEN's default so ascenders/diacritics
   on Turkish characters (ö, ü, İ) don't get clipped.
   --------------------------------------------------------------------- */
.header.slider-fade .caption h1 {
  color: var(--aceka-white);
  font-family: var(--aceka-font-display);
  font-size: clamp(1.75rem, 5vw, 5rem);
  line-height: 1.25;
  max-width: 900px;
  text-transform: none;
  letter-spacing: normal;
}
@media (max-width: 575px) {
  .header.slider-fade .caption h1 { font-size: clamp(1.5rem, 8vw, 2.25rem); }
}
.header.slider-fade .caption .aceka-eyebrow { color: var(--aceka-blue-400); }
.aceka-hero-cta-row { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }

@media (max-width: 767px) {
  .header.slider-fade .caption h1 { font-size: 2.25rem; }
}

/* ---------------------------------------------------------------------
   Numbers / stats strip — no BAUEN counter component, built new
   --------------------------------------------------------------------- */
.aceka-stats { display: flex; flex-wrap: wrap; }
.aceka-stat {
  flex: 1 1 20%;
  min-width: 140px;
  padding: 1.5rem 1.5rem 1.5rem 0;
  border-left: 1px solid rgba(255,255,255,0.15);
  padding-left: 1.5rem;
}
.aceka-stat:first-child { border-left: none; padding-left: 0; }
.aceka-stat-value {
  font-family: var(--aceka-font-display);
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 600;
  color: var(--aceka-white);
  line-height: 1;
}
.aceka-stat-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--aceka-neutral-300);
  margin-top: 0.5rem;
}
@media (max-width: 767px) {
  .aceka-stat { flex: 1 1 50%; border-left: none; padding-left: 0; margin-bottom: 1.5rem; }
}

/* ---------------------------------------------------------------------
   Operations — accordion pattern (see Phase 6 report re: SVG map scope)
   --------------------------------------------------------------------- */
.accordion-box .block.accordion { background: var(--aceka-navy-800); }
.accordion-box .block.accordion.active-block { background-color: var(--aceka-navy-800); }
.accordion-box .block .acc-btn { color: var(--aceka-white); font-family: var(--aceka-font-display); }
.accordion-box .block .acc-btn .count { color: var(--aceka-blue-400); }
.accordion-box .block .acc-btn.active { background-color: var(--aceka-navy-800); color: var(--aceka-blue-400); }
.accordion-box .block .content { background-color: var(--aceka-navy-800); color: var(--aceka-neutral-300); }
.accordion-box .block .content .text.row { align-items: center; }
.accordion-box .aceka-img-wrap { position: relative; overflow: hidden; border-radius: 2px; }
.accordion-box .aceka-img-wrap img { width: 100%; display: block; border-radius: 2px; }
.accordion-box .content ul { list-style: none; padding: 0; margin: 0 0 1rem 0; }
.accordion-box .content ul li { color: var(--aceka-neutral-300); padding: 0.25rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); }

/* ---------------------------------------------------------------------
   Group Companies carousel (adapts BAUEN .projects owl-carousel item)
   --------------------------------------------------------------------- */
.aceka-companies .item { position: relative; }
.aceka-companies .item .aceka-company-media { position: relative; height: 420px; background-size: cover; background-position: center; border-radius: 2px; overflow: hidden; }
.aceka-companies .item .con { padding-top: 1.25rem; }
.aceka-companies .item .con h6 { color: var(--aceka-blue-400); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.04em; }
.aceka-companies .item .con h5 { color: var(--aceka-white); font-size: 1.4rem; margin: 0.25rem 0 0.75rem; }
.aceka-companies-progress { height: 2px; background: rgba(255,255,255,0.15); margin-top: 1.5rem; position: relative; }
.aceka-companies-progress-bar { height: 2px; background: var(--aceka-blue-400); width: 16.66%; transition: width var(--aceka-motion-base) ease; }
.aceka-companies-counter { color: var(--aceka-neutral-300); font-size: 0.8rem; margin-top: 0.5rem; letter-spacing: 0.04em; }

/* ---------------------------------------------------------------------
   Sustainability teaser split
   --------------------------------------------------------------------- */
.aceka-sustainability { display: flex; flex-wrap: wrap; align-items: center; }
.aceka-sustainability-copy, .aceka-sustainability-media { flex: 1 1 50%; min-width: 300px; }
.aceka-sustainability-copy { padding: 3rem; }
.aceka-sustainability-media { position: relative; min-height: 340px; background-size: cover; background-position: center; }
@media (max-width: 767px) {
  .aceka-sustainability-copy { padding: 2rem; }
  .aceka-sustainability-media { min-height: 240px; order: -1; }
}

/* ---------------------------------------------------------------------
   Careers CTA band
   --------------------------------------------------------------------- */
.aceka-careers-cta { text-align: center; padding: var(--aceka-space-section) 0; }

/* ---------------------------------------------------------------------
   Detail pages — genuine BAUEN .banner-header/.section-title2/
   .projects-prev-next classes (see wwwroot/template/prime-hotel.html),
   recolored from BAUEN's default gold (#b19777) to ACEKA navy/blue.
   Layout is untouched; only color/typography tokens change.
   --------------------------------------------------------------------- */
.banner-header { background-color: var(--aceka-navy-900); }
.banner-header h5,
.banner-header h1,
.banner-header p a { color: var(--aceka-blue-400); }
.banner-header h1 { font-family: var(--aceka-font-display); }

/* BAUEN sizes this hero band purely off viewport HEIGHT (50vh, 30vh on
   mobile) rather than its own content. On a wide-but-short browser window
   that shrinks well below the logo box's own height (~138px desktop,
   ~86px mobile), so the vertically-centered eyebrow/title can render up
   underneath the opaque logo box in the top-left corner instead of below
   it. A min-height floor guarantees clearance no matter how short the
   window is, while leaving the normal 50vh/30vh untouched on any window
   tall enough for it to already win. */
.banner-header { min-height: 440px; }
@media (max-width: 767px) {
  .banner-header { min-height: 260px; }
}

/* BAUEN's .section-padding2 ships zero top padding (it relies on a
   .section-title2 heading, which our detail pages don't always have,
   to create breathing room) — text sits flush against the hero without
   it. Give it real space of its own. */
.section-padding2 { padding-top: clamp(3rem, 6vw, 5rem); }

.section-title2 {
  color: var(--aceka-navy-900);
  font-family: var(--aceka-font-display);
  font-weight: 600;
  letter-spacing: 0;
}
.section-title2 span { color: var(--aceka-blue-500); }
.projects-prev-next a:hover { color: var(--aceka-blue-500); }

/* Country/sector/company fact panel — this is the site's core "who does
   what, where" information, so it gets real visual weight (a bordered
   card with large values) instead of reading as a plain footnote list. */
.aceka-meta-list {
  list-style: none;
  padding: 2rem 1.75rem;
  margin: 0;
  /* Pure white + shadow, not var(--aceka-warm-white) — that token is
     also the page's own background, so the card was blending into the
     page instead of standing out (read as a plain footer strip). */
  background: var(--aceka-white);
  box-shadow: 0 4px 24px rgba(14, 27, 51, 0.08);
  border-left: 3px solid var(--aceka-blue-500);
}
.aceka-meta-list li {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--aceka-neutral-100);
}
.aceka-meta-list li:first-child { padding-top: 0; }
.aceka-meta-list li:last-child { padding-bottom: 0; border-bottom: none; }
.aceka-meta-label {
  display: block;
  font-family: var(--aceka-font-display);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--aceka-blue-500);
  margin-bottom: 0.4rem;
}
.aceka-meta-value {
  display: block;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--aceka-navy-900);
}
.aceka-section--dark .aceka-meta-list { background: var(--aceka-navy-800); box-shadow: none; border-left-color: var(--aceka-blue-400); }
.aceka-section--dark .aceka-meta-value { color: var(--aceka-white); }
.aceka-section--dark .aceka-meta-list li { border-bottom-color: rgba(255,255,255,0.1); }

/* Activity tags — short capabilities (e.g. "Kumaş üretimi", "Boyama")
   as individual chips instead of one long comma-separated sentence. */
.aceka-tag-title {
  font-family: var(--aceka-font-display);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--aceka-neutral-500);
  margin: 2rem 0 0.9rem;
}
.aceka-tag-list { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding: 0; margin: 0; }
.aceka-tag-list li {
  padding: 0.5rem 1rem;
  background: var(--aceka-neutral-100);
  color: var(--aceka-navy-900);
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 2px;
}

/* Related-company cards — image-led, always-visible name + activity
   (not BAUEN's hover-reveal .projects caption, which hides the label
   until you hover — these need to read at a glance). */
.aceka-related-title { margin-bottom: 1.5rem; }
.aceka-related-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.5rem; }
.aceka-related-card {
  flex: 1 1 260px;
  min-width: 240px;
  background: var(--aceka-white);
  box-shadow: 0 4px 24px rgba(14, 27, 51, 0.08);
  text-decoration: none;
  display: block;
  overflow: hidden;
  border-radius: 2px;
}
.aceka-related-card .aceka-related-media {
  height: 180px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.aceka-related-card .aceka-related-body { padding: 1.25rem 1.5rem 1.5rem; }
.aceka-related-card .aceka-eyebrow { font-size: 0.75rem; }
.aceka-related-card h5 {
  font-family: var(--aceka-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--aceka-navy-900);
  margin: 0.35rem 0 0;
}
@media (max-width: 575px) {
  .aceka-related-card { flex: 1 1 100%; }
}

/* Media Center article cards — same always-visible image-card language as
   .aceka-related-card, plus a summary line for the list excerpt. */
.aceka-news-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.aceka-news-card {
  flex: 1 1 300px;
  min-width: 260px;
  max-width: calc(33.333% - 1rem);
  background: var(--aceka-white);
  box-shadow: 0 4px 24px rgba(14, 27, 51, 0.08);
  text-decoration: none;
  display: block;
  overflow: hidden;
  border-radius: 2px;
  transition: transform var(--aceka-motion-fast) ease, box-shadow var(--aceka-motion-fast) ease;
}
.aceka-news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(14, 27, 51, 0.14);
}
.aceka-news-card .aceka-news-media {
  height: 200px;
  background-size: cover;
  background-position: center;
}
.aceka-news-card .aceka-news-body { padding: 1.25rem 1.5rem 1.5rem; }
.aceka-news-card h5 {
  font-family: var(--aceka-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--aceka-navy-900);
  margin: 0.35rem 0 0.6rem;
}
.aceka-news-card p {
  font-size: 0.9rem;
  color: var(--aceka-neutral-500);
  margin: 0;
}
@media (max-width: 991px) {
  .aceka-news-card { max-width: calc(50% - 0.75rem); }
}
@media (max-width: 575px) {
  .aceka-news-card { max-width: 100%; }
}

/* ---------------------------------------------------------------------
   Logo — single navy-on-transparent source file. The navbar and footer
   both sit on dark backgrounds, so it's rendered white there via a CSS
   filter instead of shipping a second "dark mode" logo asset. Use the
   image unfiltered (drop the class) anywhere it sits on a light section.
   --------------------------------------------------------------------- */
.aceka-logo-img {
  width: auto;
  filter: brightness(0) invert(1);
}
.aceka-logo-img--mark { height: 78px; }
@media (max-width: 767px) {
  .aceka-logo-img--mark { height: 56px; }
}

/* ---------------------------------------------------------------------
   Header — TR/EN switch + ACEKA nav polish on top of BAUEN's navbar
   --------------------------------------------------------------------- */

/* BAUEN's default nav-link spacing (15px font, 4px letter-spacing, 12px
   padding each side) was sized for a handful of short taglines. ACEKA's
   menu has more/longer items ("Sürdürülebilirlik", "Yönetim Kurulu
   Başkanının Mesajı" in the dropdown) plus the TR/EN switch after it, so
   the unmodified BAUEN spacing pushes the last item (İletişim) past the
   navbar's right edge on common desktop widths. Tighten it down. */
.navbar .navbar-nav .nav-link,
.nav-scroll .navbar-nav .nav-link {
  font-size: 13px;
  letter-spacing: 1.5px;
  padding-left: 9px;
  padding-right: 9px;
}

.aceka-lang-switch { display: flex; gap: 0.5rem; align-items: center; margin-left: 0.75rem; }
.aceka-lang-switch a {
  color: var(--aceka-white);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  opacity: 0.55;
  transition: opacity var(--aceka-motion-fast) ease;
}
.aceka-lang-switch a.active,
.aceka-lang-switch a:hover { opacity: 1; }
.aceka-lang-switch span { color: rgba(255,255,255,0.4); }

.nav-scroll .aceka-lang-switch a { color: var(--aceka-navy-900); }

/* Footer additions (Countries + Group Companies columns) */
.aceka-footer-links { list-style: none; padding: 0; margin: 0; }
.aceka-footer-links li { margin-bottom: 0.5rem; }
.aceka-footer-links a { color: var(--aceka-neutral-300); text-decoration: none; font-size: 0.9rem; }
.aceka-footer-links a:hover { color: var(--aceka-white); }
.aceka-footer-heading {
  font-family: var(--aceka-font-display);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--aceka-blue-400);
  margin-bottom: 1rem;
}