/* =========================================================
   REPRO İSTANBUL — Premium Dark Dropdown Dil Seçici
   Fully independent module: own file, own classes (langdd-*),
   self-contained tokens — does not depend on styles.css or
   header.css. Markup is emitted twice by header.js (desktop bar
   + mobile drawer, both via langDropdownHtml()), behavior owned
   entirely by lang-selector.js (Google Translate Element).
   ========================================================= */

:root {
  --ls-bg: rgba(23, 23, 23, 0.9);
  --ls-panel-bg: #171717;
  --ls-border: #262626;
  --ls-option-hover: #262626;
  --ls-text: #F3F4F6;
  --ls-text-secondary: #9CA3AF;
  --ls-cyan: #00E5FF;
  --ls-mono: 'IBM Plex Mono', monospace;
  --ls-body: 'Inter', 'Satoshi', system-ui, sans-serif;
  --ls-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.langdd {
  position: relative;
  flex: 0 0 auto;
}

/* --- Closed state: HUD trigger button --- */
.langdd__trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--ls-bg);
  border: 1px solid var(--ls-border);
  border-radius: 6px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  transition: border-color 0.3s var(--ls-ease), box-shadow 0.3s var(--ls-ease);
}
.langdd__trigger:hover,
.langdd__trigger:focus-visible,
.langdd.is-open .langdd__trigger {
  border-color: rgba(0, 229, 255, 0.5);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.22);
}

.langdd__flag {
  font-size: 13px;
  line-height: 1;
}
.langdd__code {
  font-family: var(--ls-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ls-text);
}
.langdd__chevron {
  font-size: 10px;
  color: var(--ls-text-secondary);
  transition: transform 0.25s var(--ls-ease);
}
.langdd.is-open .langdd__chevron {
  transform: rotate(180deg);
}

/* --- Open state: floating dropdown panel --- */
.langdd__panel {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  min-width: 140px;
  background: var(--ls-panel-bg);
  border: 1px solid var(--ls-border);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.22s var(--ls-ease), transform 0.22s var(--ls-ease), visibility 0.22s;
  z-index: 30;
}
.langdd.is-open .langdd__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.langdd__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px 8px 16px;
  background: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s var(--ls-ease);
}
.langdd__option + .langdd__option {
  margin-top: 1px;
}
.langdd__option-dot {
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ls-cyan);
  transition: transform 0.15s var(--ls-ease);
}
.langdd__option:hover,
.langdd__option:focus-visible,
.langdd__option.is-active {
  background: var(--ls-option-hover);
}
.langdd__option:hover .langdd__option-dot,
.langdd__option:focus-visible .langdd__option-dot,
.langdd__option.is-active .langdd__option-dot {
  transform: translateY(-50%) scale(1);
}
.langdd__option-flag {
  font-size: 14px;
  line-height: 1;
  flex: 0 0 auto;
}
.langdd__option-code {
  font-family: var(--ls-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ls-text);
  flex: 0 0 auto;
}
.langdd__option-name {
  font-family: var(--ls-body);
  font-size: 12px;
  color: var(--ls-text-secondary);
}

/* --- Drawer copy: same component, sized/positioned for the
   mobile drawer's own flow instead of floating off a header
   pill. --- */
.langdd--drawer {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--gh-border, rgba(255, 255, 255, 0.08));
}
.langdd--drawer .langdd__trigger {
  width: 100%;
  justify-content: center;
  padding: 12px;
}
.langdd--drawer .langdd__panel {
  position: static;
  margin-top: 8px;
  width: 100%;
  box-shadow: none;
  transform: none;
}
.langdd--drawer.is-open .langdd__panel {
  transform: none;
}

/* Bar copy only above the mobile nav breakpoint — the drawer
   copy (already display:none above that breakpoint via the
   drawer's own rules in header.css) takes over below it. */
@media (max-width: 860px) {
  .langdd--bar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .langdd__trigger,
  .langdd__panel,
  .langdd__option,
  .langdd__chevron,
  .langdd__option-dot {
    transition: none;
  }
}

/* =========================================================
   Google Translate Element — loaded headless (see
   lang-selector.js): its own default widget/banner/tooltip UI
   is fully suppressed here since our own dropdown drives it.
   `iframe.skiptranslate` is the stable class Google applies to
   every UI element it injects (the banner, tooltips, the
   language-picker popup) — the banner's own wrapper class is an
   auto-generated, unstable string, so we target the stable one
   instead. `body { top: 0 }` cancels the inline offset Google's
   banner applies to <body> even while hidden, so the fixed
   header never jumps down when translation is active.
   ========================================================= */
iframe.skiptranslate {
  display: none !important;
}
#google_translate_element {
  display: none !important;
}
body {
  top: 0 !important;
}
.goog-tooltip,
.goog-tooltip:hover {
  display: none !important;
}
.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}