/* === HEADER TRANSPARENT MODE === */
.main__header {
  position: fixed;
  top: 0;
  width: 100%;
  background: transparent;
  transition: all 0.3s ease;
  z-index: 999;
}

/* Başlangıçta tüm menu yazıları beyaz */
.main__header a,
.main__header .navigation__menu--item__link,
.main__header ul li a,
.main__header .logo__class {
  color: #fff !important;
}

/* Dropdown background da transparan görünsün */
.main__header .submenu,
.main__header .has__mega__menu {
  background: rgba(0, 0, 0, 0.4);
  /* istersen tamamen transparent yapabilirim */
}

/* === SCROLL SONRASI === */
.main__header.scrolled {
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Scroll sonrası yazılar siyah */
.main__header.scrolled a,
.main__header.scrolled .navigation__menu--item__link,
.main__header.scrolled ul li a,
.main__header.scrolled .logo__class {
  color: rgb(102, 103, 107) !important;
}

/* === GENEL HOVER RENK (TURUNCU) === */
.main__header a:hover,
.main__header ul li a:hover,
.main__header .navigation__menu--item__link:hover,
.main__header .submenu li a:hover,
.main__header .has__mega__menu .menu__item span:hover {
  color: #f16c37 !important;
  filter: none !important;
  transition: 0.2s ease;
}

/* Tecrübeye dayalı: scroll sonrası turuncu yine görünür */
.main__header.scrolled a:hover,
.main__header.scrolled ul li a:hover,
.main__header.scrolled .navigation__menu--item__link:hover,
.main__header.scrolled .submenu li a:hover,
.main__header.scrolled .has__mega__menu .menu__item span:hover {
  color: #f16c37 !important;
}

/* ensure no inline style stops us */
.logo__class {
  max-height: 100px !important;
  /* default large size */
  height: auto;
  transition: max-height 250ms ease, transform 250ms ease;
  display: block;
}

/* scrolled state (smaller) */
.main__header.scrolled .logo__class,
.header-scrolled .logo__class {
  max-height: 70px !important;
}

table.specs {
  width: 100%;
  max-width: 700px;
  border-collapse: collapse;
  margin: 0 auto;
  background: #ffffff78;
  border: 1px solid #b1b2b3;
}

table.specs td {
  padding: 12px 10px;
  font-size: 16px;
}

table.specs td:first-child {
  text-align: left;
  font-weight: 600;
  width: 40%;
}

table.specs td:last-child {
  text-align: right;
  font-weight: 400;
  width: 60%;
}

table.specs tr {
  border-bottom: 1px solid #b1b2b3;
}

table.specs tr:last-child {
  border-bottom: none;
}

.spec-container {
  display: flex;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  background: #ffffff78;
  border: 1px solid #b1b2b3;
}

.spec-table {
  width: 50%;
  border-collapse: collapse;
}

.spec-table tr {
  border-bottom: 1px solid #b1b2b3;
}

.spec-table td {
  padding: 12px 10px;
  font-size: 16px;
}

.spec-table td:first-child {
  font-weight: 600;
  text-align: left;
  width: 45%;
}

.spec-table td:last-child {
  text-align: right;
  width: 55%;
}

table.spec-table tr:last-child {
  border-bottom: none;
}

/* ? Force left alignment when colspan=2 */
.spec-table td[colspan="2"] {
  text-align: left !important;
}

@media(max-width: 768px) {
  .spec-container {
    flex-direction: column;
    gap: 20px;
  }

  .spec-table {
    width: 100%;
  }
}

.extra-table {
  width: 50%;
  border-collapse: collapse;
}

.extra-table tr {
  border-bottom: 1px solid #b1b2b3;
}

.extra-table td {
  padding: 12px 10px;
  font-size: 16px;
  text-align: left;
}

.extra-table td:first-child {
  font-weight: 600;
  width: 45%;
}

.extra-table td:last-child {
  text-align: right;
  width: 55%;
}

/* ? Force left alignment when colspan=2 */
.extra-table td[colspan="2"] {
  text-align: left !important;
  font-weight: 600;
}

table.extra-table tr:last-child {
  border-bottom: none;
}