/* ══════════════════════════════════════════
   ÜRETİM TESİSİ SAYFASI (Prefix: .fx-)
   Ana sayfanın dili: ince çerçeveli koyu filmli giriş, sarı rakam paneli,
   tel üzerinde istasyonlar gibi dizilen üretim adımları, koyu zeminde mozaik galeri.
   Yalnızca bu sayfada yüklenir.
══════════════════════════════════════════ */
.fx-gallery, .fc-lb {
  --fx-ink: #1d1d1b;
  --fx-deep: #0c0c0b;
  --fx-yellow: var(--nk-orange, #ffd200);
  --fx-muted: rgba(29, 29, 27, .66);
  --fx-line: rgba(29, 29, 27, .12);
  --fx-ease: cubic-bezier(.22, 1, .36, 1);
  font-family: var(--nk-font);
}

.fx-eyebrow {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1.2rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--nk-accent-ink);
}
.fx-eyebrow i { display: block; flex: none; width: 34px; height: 2px; background: currentColor; }
.fx-eyebrow--light { color: rgba(255, 255, 255, .8); }
.fx-eyebrow--light i { background: var(--fx-yellow); }

.fx-display {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--fx-ink);
  text-wrap: balance;
}
.fx-display--light { color: #f4f4f1; }

/* ── Galeri ── */
.fx-gallery { padding: clamp(4.5rem, 11vh, 7rem) var(--nk-pad); background: #0b0b0a; color: #fff; }
.fx-gallery__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(2rem, 5vh, 3rem); }
.fx-gallery__count { margin: 0; font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.fx-gallery__count b { font-size: 2rem; font-weight: 600; letter-spacing: -.02em; color: var(--fx-yellow); }

.fx-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(170px, 15vw, 250px);
  grid-auto-flow: dense;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fx-grid__item.is-big { grid-column: span 2; grid-row: span 2; }
.fx-grid__item.is-fill { grid-column: span var(--fx-span, 1); }
.fx-grid button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #1a1a18;
  cursor: zoom-in;
}
.fx-grid img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(.86); transition: transform .9s var(--fx-ease), filter .5s var(--fx-ease); }
.fx-grid button:hover img, .fx-grid button:focus-visible img { transform: scale(1.06); filter: none; }
.fx-grid__frame { position: absolute; inset: 12px; border: 1px solid rgba(255, 255, 255, 0); pointer-events: none; transition: inset .45s var(--fx-ease), border-color .45s var(--fx-ease); }
.fx-grid__frame i { position: absolute; width: 18px; height: 18px; border: 0 solid var(--fx-yellow); }
.fx-grid__frame i:nth-child(1) { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.fx-grid__frame i:nth-child(2) { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.fx-grid__frame i:nth-child(3) { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
.fx-grid__frame i:nth-child(4) { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.fx-grid__frame i { opacity: 0; transition: opacity .45s var(--fx-ease); }
.fx-grid button:hover .fx-grid__frame, .fx-grid button:focus-visible .fx-grid__frame { inset: 16px; border-color: rgba(255, 255, 255, .28); }
.fx-grid button:hover .fx-grid__frame i, .fx-grid button:focus-visible .fx-grid__frame i { opacity: 1; }
.fx-grid__no {
  position: absolute; top: 0; left: 0;
  padding: .45rem .7rem;
  background: var(--fx-yellow); color: var(--fx-ink);
  font-size: .7rem; font-weight: 700; letter-spacing: .06em;
}
.fx-grid__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.4rem 1.6rem 1.4rem;
  background: linear-gradient(0deg, rgba(12, 12, 11, .85) 0%, rgba(12, 12, 11, 0) 100%);
  font-size: .8rem;
  font-weight: 600;
  text-align: start;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s var(--fx-ease), transform .35s var(--fx-ease);
}
.fx-grid button:hover .fx-grid__cap, .fx-grid button:focus-visible .fx-grid__cap { opacity: 1; transform: none; }
.fx-grid button:focus-visible { outline: 2px solid var(--fx-yellow); outline-offset: 2px; }

/* Sağdan sola diller */
[dir=rtl] .fx-grid__no { left: auto; right: 0; }

/* ── Tam ekran görüntüleyici ── */
.fc-lb {
  position: fixed; inset: 0; z-index: 2000;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  padding: clamp(1rem, 3vw, 2.5rem);
  background: rgba(14, 14, 13, .94);
  opacity: 0; transition: opacity .25s var(--fx-ease);
}
.fc-lb[hidden] { display: none; }
.fc-lb.is-open { opacity: 1; }
.fc-lb figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .8rem; min-width: 0; }
.fc-lb img { max-width: 100%; max-height: calc(100svh - 7rem); object-fit: contain; }
.fc-lb figcaption { font-size: .8rem; color: rgba(255, 255, 255, .8); }
.fc-lb__nav, .fc-lb__close { border: 1px solid rgba(255, 255, 255, .3); background: none; color: #fff; cursor: pointer; transition: background .2s, color .2s; }
.fc-lb__nav { width: 52px; height: 52px; font-size: 1.2rem; }
.fc-lb__nav:hover, .fc-lb__close:hover { background: #fff; color: var(--fx-ink); }
.fc-lb__close { position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; font-size: 1.6rem; line-height: 1; }

@media (max-width: 991.98px) {
  .fx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 38vw; }
  .fx-grid__item.is-fill { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
      .fx-gallery__head { flex-direction: column; align-items: flex-start; }
  .fx-grid__cap { opacity: 1; transform: none; }
  .fc-lb { grid-template-columns: 1fr; }
  .fc-lb__nav { position: absolute; bottom: 1.25rem; }
  .fc-lb__nav--prev { left: calc(50% - 60px); }
  .fc-lb__nav--next { right: calc(50% - 60px); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-grid img, .fx-grid__cap, .fx-grid__frame, .fc-lb { transition: none; }
}

/* ── Ürünler sayfası diliyle açık zemin: başlık + sıcak gri karolar ── */
.fx-page .tpl-head { align-items: flex-end; }
.fx-head__side { display: flex; flex-direction: column; gap: 1rem; width: min(460px, 100%); flex: none; }
.fx-head__text { margin: 0; padding-left: 1.1rem; border-left: 3px solid var(--nk-orange); font-size: .92rem; line-height: 1.75; color: rgba(29, 29, 27, .72); }
[dir=rtl] .fx-head__text { padding: 0 1.1rem 0 0; border-left: 0; border-right: 3px solid var(--nk-orange); }
.fx-page .fx-gallery { padding-top: 0; background: none; color: inherit; }
.fx-page .fx-grid button { background: #efece7; }
.fx-page .fx-grid img { filter: none; }
.fx-page .fx-grid__frame { border-color: transparent; }
.fx-page .fx-grid button:hover .fx-grid__frame, .fx-page .fx-grid button:focus-visible .fx-grid__frame { border-color: rgba(255, 255, 255, .55); }
.fx-page .fx-grid__no { background: var(--tk-ink, #1d1d1b); color: var(--nk-orange); }
@media (max-width: 991.98px) { .fx-head__side { width: 100%; } }