/* =============================================================================
 * TEAM FORGE — shared navigation (WEB PHASE 1B)
 * Two consumers, one stylesheet:
 *   1) index.html storefront — Faz 14F: dropdown kalkti, bu dosyadan stil kullanmaz;
 *      everything else in that header is the existing markup, untouched.
 *   2) Forge XI pages — the full shared header (.tfnav*) rendered by tf-nav.js.
 *
 * Colors use var(--token, fallback): on index they inherit the storefront theme
 * tokens (light/dark aware); on Forge XI pages the fallbacks apply (premium dark).
 * All selectors are class-scoped (tfnav) so nothing here can touch existing
 * storefront rules or IDs.
 * ========================================================================== */

/* --------------------- Forge XI dropdown (shared) ------------------------- */
/* FAZ 14F: .fxsub* acilir menu stilleri KALDIRILDI (Forge XI artik duz link). */

/* ==================== Forge XI page shared header ========================= *
 * Only used where tf-nav.js renders into #tf-nav-mount (Forge XI pages).      */
.tfnav { border-bottom: 1px solid rgba(255,255,255,0.08); background: #0a0a0b; }
.tfnav-inner { max-width: 1140px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 22px; }
.tfnav-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.tfnav-brand img { height: 30px; width: auto; display: block; }
.tfnav-brand .tfnav-wm { font-family: 'Oswald', sans-serif; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #f4f2ec; font-size: 1rem; }
.tfnav-brand .tfnav-wm b { color: #d4af37; }

.tfnav-links { display: none; align-items: center; gap: 20px; margin-left: auto; }
.tfnav-link {
  color: #a7a29a; text-decoration: none; font-size: 0.9rem; font-weight: 500; letter-spacing: 0.02em;
  white-space: nowrap; padding: 4px 2px; transition: color 0.25s ease;
}
.tfnav-link:hover, .tfnav-link[aria-current="page"] { color: #d4af37; }
.tfnav-link:focus-visible { outline: 2px solid #d4af37; outline-offset: 3px; border-radius: 4px; }

.tfnav-ham {
  margin-left: auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px;
  background: transparent; border: 1px solid rgba(255,255,255,0.12); color: #f4f2ec; cursor: pointer;
}
.tfnav-ham:focus-visible { outline: 2px solid #d4af37; outline-offset: 2px; }
.tfnav-ham svg { width: 22px; height: 22px; }

.tfnav-mobile { display: none; flex-direction: column; gap: 2px; padding: 6px 20px 16px; max-width: 1140px; margin: 0 auto; }
.tfnav-mobile.open { display: flex; }
.tfnav-mobile a {
  padding: 13px 4px; color: #f4f2ec; text-decoration: none; font-size: 1rem; letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.tfnav-mobile a:hover, .tfnav-mobile a[aria-current="page"] { color: #d4af37; }
.tfnav-mobile a:focus-visible { outline: 2px solid #d4af37; outline-offset: -2px; }

@media (min-width: 860px) {
  .tfnav-links { display: flex; }
  .tfnav-ham { display: none; }
  .tfnav-mobile { display: none !important; }
}

/* ---- Faz 10b: sepet linki + adet rozeti (Forge XI sayfalarında sepete erişim) ---- */
.tfnav-cart { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-left: auto; border-radius: 10px; color: var(--fx-ink, #f4f2ec);
  text-decoration: none; flex: none; transition: color .2s ease, background .2s ease; }
.tfnav-cart:hover { color: var(--fx-gold, #d4af37); background: rgba(212,175,55,0.10); }
.tfnav-cart svg { width: 21px; height: 21px; }
.tfnav-cart-count { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--fx-gold, #d4af37); color: #10100c;
  font-family: 'Oswald', sans-serif; font-size: 0.62rem; font-weight: 700; line-height: 17px; text-align: center; }
/* Hamburger zaten sağda; sepet ondan hemen önce gelir. */
.tfnav-ham { margin-left: 6px; }
@media (min-width: 900px) { .tfnav-cart { margin-left: 14px; } }