/* CableTradeZone — lang.css (dark theme, Firefox-safe) */

.ctz-lang-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 400;
  margin-left: 6px;
  flex-shrink: 0;
}

/* ── Buton ── */
.ctz-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px 5px 7px;
  background: transparent;
  border: 1px solid var(--b2);
  border-radius: 5px;
  color: var(--dim);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  transition: border-color .15s, background .15s, color .15s;
  font-family: inherit;
  outline: none;
}
.ctz-lang-btn:hover,
.ctz-lang-btn[aria-expanded="true"] {
  background: var(--s2);
  border-color: var(--accent);
  color: var(--text);
}
.ctz-lang-flag { font-size: 13px; line-height: 1; display: inline-block; }
.ctz-lang-code { text-transform: uppercase; font-family: var(--mono); font-size: 11px; }
.ctz-lang-caret {
  opacity: .55;
  transition: transform .18s;
  flex-shrink: 0;
  display: block;
}
.ctz-lang-btn[aria-expanded="true"] .ctz-lang-caret {
  transform: rotate(180deg);
}

/* ── Dropdown — dark tema ── */
.ctz-lang-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 170px;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: var(--s1);            /* dark: #111418 */
  border: 1px solid var(--b2);      /* dark: #2d3440 */
  border-radius: 8px;
  box-shadow: 0 10px 32px rgba(0,0,0,.55);
  /* Firefox'ta opacity-only animasyon bazen çalışmıyor → visibility de kullan */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
  overflow: hidden;
  z-index: 401;
}
.ctz-lang-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateY(0);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear 0s;
}

/* ── Seçenek ── */
.ctz-lang-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--dim);
  transition: background .1s, color .1s;
  user-select: none;
}
.ctz-lang-option:hover,
.ctz-lang-option:focus { outline: none; background: var(--s2); color: var(--text); }
.ctz-lang-option.is-active { background: rgba(245,166,35,.08); color: var(--accent); font-weight: 600; }
.ctz-lang-native { flex: 1; }
.ctz-lang-check  { color: var(--accent); margin-left: auto; flex-shrink: 0; display: block; }

/* ── RTL ── */
html[dir="rtl"] .ctz-lang-dropdown { right: auto; left: 0; }
html[dir="rtl"] .ctz-lang-wrap     { margin-left: 0; margin-right: 6px; }

/* ── @900px: desktop nav gizlenince lang-wrap de gizlenir ── */
@media (max-width: 900px) {
  .hdr-nav { display: none; }
  .hamburger { display: block; }
}

/* ── Mobil dil satırı (mobile-nav içinde) ── */
.mobile-lang-row {
  padding: 10px 20px 14px;
  border-top: 1px solid var(--b1);
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.mobile-lang-label {
  font-size: 11px;
  color: var(--dim);
  margin-right: 3px;
  white-space: nowrap;
}
.mobile-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--s2);
  border: 1px solid var(--b1);
  color: var(--dim);
  border-radius: 5px;
  padding: 5px 9px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, background .15s, color .15s;
}
.mobile-lang-btn:hover { border-color: var(--accent); color: var(--accent); }
.mobile-lang-btn.active {
  border-color: rgba(245,166,35,.4);
  background: rgba(245,166,35,.1);
  color: var(--accent);
  font-weight: 600;
}

/* ── Flash mesajları ── */
.flash {
  max-width: 1440px;
  margin: 8px auto;
  padding: 10px 16px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}
.flash button { background: none; border: none; color: inherit; cursor: pointer; font-size: 16px; padding: 0 4px; }
.flash-success { background: rgba(34,197,94,.1);  border: 1px solid rgba(34,197,94,.25);  color: var(--green); }
.flash-error   { background: rgba(239,68,68,.1);  border: 1px solid rgba(239,68,68,.25);  color: var(--red);   }
.flash-info    { background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.25); color: var(--blue);  }