/* ====================================================
   ALS · Mega Dropdown Navbar (Bootstrap 5.3.8)
   .NET 9 Blazor Web App · app.css
   ==================================================== */

/* ---- Font Definitions (Self-Hosted) ---- */
/* ALS sabit 5 font: Bulo (varsayılan), Noto Sans, Source Serif 4, Lora, PT Sans Narrow */
/* Google Fonts import kaldırıldı — tüm fontlar self-hosted */

/* Bulo Font Family (varsayılan) */
@font-face {
  font-family: "Bulo";
  src:
    url("/fonts/Bulo.woff") format("woff"),
    url("/fonts/Bulo.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bulo";
  src:
    url("/fonts/BuloMedium.woff") format("woff"),
    url("/fonts/BuloMedium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bulo";
  src:
    url("/fonts/BuloBold.woff") format("woff"),
    url("/fonts/Bulo%20Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bulo";
  src:
    url("/fonts/BuloBlack.woff") format("woff"),
    url("/fonts/Bulo%20Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Noto Sans */
@font-face {
  font-family: "Noto Sans";
  src: url("/fonts/NotoSans-Latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Source Serif 4 */
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/SourceSerif4-Latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Lora */
@font-face {
  font-family: "Lora";
  src: url("/fonts/Lora-Latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* PT Sans Narrow */
@font-face {
  font-family: "PT Sans Narrow";
  src: url("/fonts/PTSansNarrow-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PT Sans Narrow";
  src: url("/fonts/PTSansNarrow-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Global Font Application ---- */
/* Varsayılan font: Bulo. Sitede sadece 5 font kullanılır. */
body {
  font-family: "Bulo", sans-serif;
  font-weight: 400;
}

/* Horizontal overflow prevention ONLY for body */
body {
  overflow-x: hidden !important;
}

/* Content areas & home page sections - no scrollbars at all */
.page-content,
.content-body,
.content-body-secondary,
.content-section,
.hero-section,
.video-section,
main:not(.navbar):not(.dropdown),
section:not(.dropdown),
article,
.container:not(.navbar .container) {
  overflow: hidden !important;
}

/* Navbar and dropdown menus - MUST overflow visible */
.navbar,
.navbar-collapse,
.nav,
.nav-item,
.dropdown,
.dropdown-menu,
.mega-menu {
  overflow: visible !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Bulo", sans-serif;
  font-weight: 700;
}

.btn {
  font-family: "Bulo", sans-serif;
  font-weight: 500;
}

/* Apply Bulo font specifically to UI elements - not content areas */
.navbar,
.breadcrumb,
footer,
.btn,
label,
input,
textarea,
select,
button {
  font-family: "Bulo", sans-serif;
}

/* ---- Marka renkleri (isteğe göre düzenle) ---- */
:root,
[data-bs-theme="light"] {
  --logo-mid: #4e8fff; /* Mid Blue */
  --logo-navy: #1b3860; /* Navy */
  /* Mega kart ortak ölçüleri */
  --mega-item-height: 112px; /* tüm kartlar aynı yükseklik */
  --mega-item-icon-w: 32px; /* ikon alanı */
  --mega-item-radius: 12px; /* köşe yumuşaklığı */
}

/* ---- Navbar link renkleri ve font ---- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: var(--bs-body-bg);
}

.navbar .nav-link {
  font-weight: 500;
  padding: 0.375rem 0.75rem; /* Reduced padding for smaller height */
  line-height: 1.125;
  display: flex;
  align-items: center; /* Vertical center alignment */
}

.navbar .nav-link:hover {
  color: var(--logo-mid);
}

.navbar .nav-link.active,
.navbar .show > .nav-link {
  color: var(--logo-navy);
}

/* ---- Navbar brand ---- */
.navbar-brand {
  font-weight: 700;
}

/* ---- Navbar buttons ---- */
.navbar .btn {
  padding: 0.375rem 1rem; /* Smaller height, comfortable horizontal padding */
  line-height: 1.125;
  display: inline-flex;
  align-items: center; /* Vertical center alignment */
  justify-content: center;
  min-height: 36px; /* Fixed minimum height */
}

/* ---- Navbar dropdown toggle ---- */
.navbar .dropdown-toggle {
  padding: 0.375rem 0.75rem;
  line-height: 1.125;
  display: flex;
  align-items: center;
}

/* ---- Basic dropdown positioning fix ---- */
/* Blog and Vendors should open under their own button, not at the far left */
.navbar .nav-item.dropdown:not(.position-static) {
  position: relative !important;
}

.navbar .nav-item.dropdown:not(.position-static) > .dropdown-menu {
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
}

/* ---- Mega dropdown temel düzen ---- */
/* Mega menüler relative position kullanır ve tıklanan yerin altında açılır */
.dropdown-mega .dropdown-menu.mega-menu,
.navbar .dropdown .dropdown-menu.mega-menu {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-top: 0 !important;
  width: auto !important;
  min-width: 950px !important;
  max-width: min(1350px, 96vw) !important;
}

.dropdown-mega .dropdown-menu.mega-menu {
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  box-shadow:
    0 1rem 2rem rgba(0, 0, 0, 0.08),
    0 0.25rem 0.75rem rgba(0, 0, 0, 0.04);
}

/* Başlık bloğu */
.mega-head h6 {
  margin: 0;
  font-weight: 700;
}

.mega-head small {
  color: var(--bs-secondary-color);
}

/* Card başlıkları */
.card-title {
  font-weight: 700;
}

.dropdown-menu .dropdown-item {
  font-weight: 400;
}

/* ---- Mega içerik yerleşimi: CSS Grid ---- */
.mega-grid {
  display: grid;
  gap: 1rem; /* kartlar arası boşluk */
  grid-template-columns: 1fr; /* xs */
}

@media (min-width: 768px) {
  /* md */
  .mega-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  /* lg+ */
  .mega-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* istersen xl’de 4 kolona aç */
@media (min-width: 1200px) {
  .mega-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- Mega item: SABİT BOYUT KUTU ---- */
.mega-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  min-height: var(--mega-item-height);
  max-height: var(--mega-item-height);
  padding: 1rem 1.25rem;
  border-radius: var(--mega-item-radius);
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  text-decoration: none;
  transition: background 0.15s ease-in-out;
}

.mega-item:hover {
  background: var(--bs-tertiary-bg);
  text-decoration: none;
}

.mega-item i {
  font-size: 1.95rem; /* %30 büyük (1.5 × 1.3) */
  line-height: 0.75;
  margin-top: 0;
  flex: 0 0 var(--mega-item-icon-w); /* sabit ikon alanı */
  text-align: center;
  display: flex;
  align-items: center;
  height: 1.25rem; /* başlık ilk satırıyla hizala */
}

/* Metinlerin taşmasını düzgün kes */
.mega-title {
  font-family: "Lora", serif;
  font-weight: 600;
  font-size: 1.0625rem; /* bir boy büyük */
  margin: 0 0 0.15rem 0;
  white-space: normal;
  word-break: break-word;
}

.mega-desc {
  font-size: 0.875rem;
  color: var(--bs-secondary-color);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 2 satırda kes */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Opsiyonel: seçili durumu vurgusu */
.mega-item.is-active {
  background: color-mix(in srgb, var(--logo-mid) 14%, transparent);
  outline: 1px solid color-mix(in srgb, var(--logo-mid) 25%, transparent);
}

/* ≥lg ekranlarda hover ile aç/kapa (mobilde tıkla) */
@media (min-width: 992px) {
  .dropdown-mega:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}

/* Küçük ekranlarda kart yüksekliğini biraz düşür */
@media (max-width: 575.98px) {
  :root {
    --mega-item-height: 100px;
  }
}

/* ---- Card-style mega menu ---- */
.mega-menu {
  min-width: 950px;
  max-width: 1300px;
  border: none;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.hover-card {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.hover-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.12) !important;
}

.card-title {
  font-family: "Lora", serif;
  font-size: 1.0625rem;
  font-weight: 600;
}

/* Position static for mega menu */
.position-static {
  position: static !important;
}

/* Dropdown menu alignment */
.dropdown-menu-center {
  left: 50% !important;
  transform: translateX(-50%);
}

/* Text truncate for 2 lines */
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
  max-height: 2.7em; /* 2 lines * 1.35 line-height */
}

/* ---- Industries Mixed Menu Styles ---- */
/* Note: This style is now used for "Our Services" menu */
.hover-bg-light {
  transition: background-color 0.2s ease;
}

.hover-bg-light:hover {
  background-color: #f8f9fa !important;
}

/* Left column items - simple style (used in mixed menu layouts) */
.industries-left-item {
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  text-decoration: none;
  color: inherit;
}

.industries-left-item:hover {
  background-color: #f8f9fa;
  text-decoration: none;
}

.industries-left-item .icon-wrapper {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #0d6efd;
}

.industries-left-item .content-wrapper {
  flex: 1;
  min-width: 0;
}

.industries-left-item .item-title {
  font-family: "Lora", serif;
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: #212529;
  white-space: normal;
  word-break: break-word;
}

.industries-left-item .item-description {
  font-size: 0.8125rem;
  color: #6c757d;
  line-height: 1.4;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Right column items - card style (used in mixed menu layouts) */
.industries-right-card {
  transition: all 0.2s ease;
  background: white;
  border: 1px solid #e9ecef;
  padding: 0.875rem;
  border-radius: 0.375rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  height: 100%;
}

.industries-right-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.375rem 0.75rem rgba(0, 0, 0, 0.08) !important;
  border-color: #cbd5e0;
  text-decoration: none;
}

.industries-right-card .icon-wrapper {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: #0d6efd;
}

.industries-right-card .content-wrapper {
  flex: 1;
  min-width: 0;
}

.industries-right-card .card-title {
  font-family: "Lora", serif;
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0;
  color: #212529;
  line-height: 1.3;
  white-space: normal;
  word-break: break-word;
}

.industries-right-card .card-text {
  font-size: 0.8125rem;
  color: #6c757d;
  line-height: 1.4;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Content Body Styles ---- */
/* Content areas naturally inherit from body or use inline styles from TinyMCE */
.page-content,
.content-body,
.content-body-secondary,
.content-section,
.hero-section,
.video-section {
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  overflow: hidden !important;
}

/* Links inside body content: no underline by default, underline + blue on hover.
   Excludes buttons (.btn), hero-section and video-section links.
   TinyMCE wraps link text in <span style="color:..."> which overrides
   inherited color — the span selectors below use !important to win. */
.page-content a:not(.btn):not([class*="btn-"]),
.content-body a:not(.btn):not([class*="btn-"]),
.content-body-secondary a:not(.btn):not([class*="btn-"]),
.content-section a:not(.btn):not([class*="btn-"]) {
  text-decoration: none !important;
  transition:
    color 0.15s ease-in-out,
    text-decoration 0.15s ease-in-out;
}

/* Hover: underline + blue on the <a> AND any child span with inline style */
.page-content a:not(.btn):not([class*="btn-"]):hover,
.content-body a:not(.btn):not([class*="btn-"]):hover,
.content-body-secondary a:not(.btn):not([class*="btn-"]):hover,
.content-section a:not(.btn):not([class*="btn-"]):hover {
  text-decoration: underline !important;
  color: var(--logo-mid) !important;
}

.page-content a:not(.btn):not([class*="btn-"]):hover span,
.content-body a:not(.btn):not([class*="btn-"]):hover span,
.content-body-secondary a:not(.btn):not([class*="btn-"]):hover span,
.content-section a:not(.btn):not([class*="btn-"]):hover span {
  color: var(--logo-mid) !important;
}

/* Hero & video section links keep their own styles */
.hero-section a,
.video-section a {
  text-decoration: none !important;
}

.hero-section a:hover span,
.video-section a:hover span {
  color: inherit !important;
}

.page-content img,
.content-body img,
.content-body-secondary img,
.content-section img {
  max-width: 100%;
  height: auto;
}

.page-content table,
.content-body table,
.content-body-secondary table,
.content-section table {
  width: 100%;
  overflow: visible !important;
  display: table !important;
}

/* Content areas: override Bootstrap's table border reset
   so inline styles and HTML border attribute work correctly */
.page-content thead,
.page-content tbody,
.page-content tfoot,
.page-content tr,
.page-content td,
.page-content th,
.content-body thead,
.content-body tbody,
.content-body tfoot,
.content-body tr,
.content-body td,
.content-body th,
.content-body-secondary thead,
.content-body-secondary tbody,
.content-body-secondary tfoot,
.content-body-secondary tr,
.content-body-secondary td,
.content-body-secondary th,
.content-section thead,
.content-section tbody,
.content-section tfoot,
.content-section tr,
.content-section td,
.content-section th {
  border-width: inherit;
  border-style: inherit;
  border-color: inherit;
}

/* Force all tables to never scroll */
table {
  overflow: visible !important;
  display: table !important;
}

.page-content iframe,
.content-body iframe,
.content-body-secondary iframe,
.content-section iframe {
  max-width: 100%;
}

/* Video iframe: siyah çizgi/border kaldır */
.video-section iframe,
.ratio iframe {
  display: block !important;
  border: 0 none !important;
  max-width: 100%;
  outline: none !important;
}

.video-section .ratio,
.video-section .ratio::before {
  background: transparent !important;
  border: 0 !important;
}

.video-section {
  background: transparent !important;
  border: 0 !important;
  line-height: 0;
  font-size: 0;
  margin: 0;
  padding: 0;
}

.video-section .container,
.video-section .container-fluid {
  line-height: 0;
  font-size: 0;
  padding: 0 !important;
}

/* ---- Target Languages Dropdown ---- */
.target-languages-container {
  position: relative;
}

.target-languages-dropdown {
  position: absolute;
  width: 100%;
  max-height: 250px;
  overflow-y: auto;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  z-index: 1050;
  margin-top: 0.25rem;
}

.target-languages-dropdown .dropdown-item {
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

.target-languages-dropdown .dropdown-item:hover {
  background-color: #f8f9fa;
}

.target-languages-dropdown .dropdown-item.active {
  background-color: #e7f1ff;
  color: #0d6efd;
}

.target-language-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.7rem;
  background-color: #6c757d;
  color: white;
  border-radius: 0.375rem;
  font-size: 0.9rem;
  font-weight: 500;
}

.target-language-tag .btn-close {
  font-size: 0.65rem;
  opacity: 0.8;
}

.target-language-tag .btn-close:hover {
  opacity: 1;
}

/* Mobilde reusable content blokları gizle */
@media (max-width: 767.98px) {
  .reusable-content-block {
    display: none !important;
  }
}