/* =============================================================
   navbar.css — CardNav bar.
   Üstte: full-width, logo en solda + buton en sağda, BÜYÜK.
   Kaydırınca VEYA mega açılınca: smooth şekilde ortada DARALIR + beyaz olur.
   SCOPE KURALI: HER selector .mcy-cardnav kökünden türer.
   ============================================================= */

.mcy-cardnav {
  position: fixed;                        /* sabit: aşağı kaydırınca bizimle kalır */
  top: 40px;                              /* eski absolute konumla birebir: hero pad (20) + iç offset (20) */
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 88px), 1752px);  /* hero kartı (max 1800, pad 20) − 24px/kenar = eski genişlikle aynı */
  z-index: 40;
}

.mcy-cardnav .mcy-cardnav__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  height: 72px;
  margin: 0 auto;
  padding: 0 12px 0 14px;
  border-radius: 22px;
  background: transparent;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.1, 1),
              background-color 0.4s ease, box-shadow 0.4s ease, height 0.4s ease, padding 0.4s ease,
              -webkit-backdrop-filter 0.4s ease, backdrop-filter 0.4s ease;
}
/* DARALMIŞ durum: kaydırılmış veya açık */
.mcy-cardnav[data-compact="true"] .mcy-cardnav__bar {
  width: 1080px;
  max-width: 100%;
  height: 64px;
  padding: 0 12px 0 22px;
  background: rgba(255, 255, 255, 0.93);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  backdrop-filter: blur(22px) saturate(130%);
  box-shadow: 0 22px 54px -30px rgba(28, 22, 18, 0.45);
}

.mcy-cardnav .mcy-cardnav__logo { justify-self: start; display: inline-flex; align-items: center; }
.mcy-cardnav .mcy-cardnav__logo img {
  height: 40px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);   /* en üstte (transparan bar): logo beyaz */
  transition: height 0.4s ease, filter 0.4s ease;
}
/* daralınca/açılınca (beyaz bar): logo normal rengine döner */
.mcy-cardnav[data-compact="true"] .mcy-cardnav__logo img { height: 30px; filter: none; }

.mcy-cardnav .mcy-cardnav__menu {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
}
.mcy-cardnav .mcy-cardnav__menu li {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.mcy-cardnav .mcy-cardnav__menu li:hover { opacity: 0.65; }
.mcy-cardnav .mcy-cardnav__menu li .mcy-ico {
  width: 13px;
  height: 13px;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.mcy-cardnav[data-open="true"] #mcyMegaTrigger .mcy-ico { transform: rotate(90deg); }

/* CTA: üstte büyük, daralınca normal */
.mcy-cardnav .mcy-cardnav__cta {
  justify-self: end;
  padding: 11px 26px 11px 7px;
  font-size: 15px;
  transition: padding 0.4s ease, font-size 0.4s ease, background-color 0.2s ease, transform 0.16s ease;
}
.mcy-cardnav .mcy-cardnav__cta .mcy-btn__ico .mcy-ico { width: 18px; height: 18px; }
.mcy-cardnav[data-compact="true"] .mcy-cardnav__cta { padding: 8px 22px 8px 6px; font-size: 14px; }

/* ============================ Responsive ============================ */
@media (max-width: 1023px) {
  .mcy-cardnav { top: 32px; width: calc(100% - 64px); }   /* fixed: hero pad (20) + 12 üst / 20 + 12 yan */
  .mcy-cardnav .mcy-cardnav__menu { display: none; }
  .mcy-cardnav .mcy-cardnav__bar { grid-template-columns: 1fr auto; height: 64px; }
  .mcy-cardnav[data-compact="true"] .mcy-cardnav__bar { width: 100%; }
  .mcy-cardnav .mcy-cardnav__logo img { height: 30px; }
}

@media (max-width: 767px) {
  .mcy-cardnav { top: 26px; width: calc(100% - 52px); }   /* fixed: hero pad (14) + 12 üst/yan */
}