/* FlexiShield Türkiye — site-specific additions on top of the compiled Tailwind bundle (flexishield.css) */

@font-face {
  font-family: "Inter var";
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url("/fonts/inter-latin-var.woff2") format("woff2");
}

:root {
  --fs-nav-h: 80px;
  --color-brand: #f79531;
  --color-brand-light: #f8ad62;
  --color-brand-dark: #eb7a0a;
}

html { scroll-behavior: smooth; }
body {
  background: #111;
  color: #fff;
  font-family: "Inter var", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
[hidden] { display: none !important; }

/* keep sticky header offset for in-page anchors */
[id] { scroll-margin-top: calc(var(--fs-nav-h) + 16px); }

/* ---- Header / mega-menu (JS-driven, no framework) ---- */
.fs-nav-shell { max-width: 88rem; margin-inline: auto; }
.fs-mega { display: none; }
.fs-mega.is-open { display: block; }
.fs-dropdown { display: none; }
.fs-dropdown.is-open { display: block; }
.fs-mobile { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s ease, opacity .3s ease; }
.fs-mobile.is-open { max-height: calc(100vh - var(--fs-nav-h)); opacity: 1; overflow-y: auto; }
.fs-acc-panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.fs-acc-panel.is-open { max-height: 1200px; }
.fs-nav-caret { transition: transform .3s ease; }
.fs-nav-caret.is-open { transform: rotate(180deg); }

@media (min-width: 1280px) {
  .fs-nav-group { position: relative; }
  .fs-nav-group:hover > .fs-mega,
  .fs-nav-group:focus-within > .fs-mega,
  .fs-nav-group:hover > .fs-dropdown,
  .fs-nav-group:focus-within > .fs-dropdown { display: block; }

  /* Invisible hover-bridge: keeps :hover alive while the cursor crosses the gap
     between the trigger and the panel (which is fixed/absolute-positioned). */
  .fs-nav-group::after {
    content: "";
    position: absolute;
    top: 100%;
    left: -0.75rem;
    right: -0.75rem;
    height: 2.75rem;
    pointer-events: none;
  }
  .fs-nav-group:hover::after,
  .fs-nav-group:focus-within::after { pointer-events: auto; }

  /* Full-width mega panels: bridge the gap up to the sticky nav across the
     whole row so a diagonal cursor path never drops the hover. */
  .fs-mega::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -0.75rem;
    height: 0.75rem;
  }
}

/* ---- WhatsApp floating button ---- */
.fs-wa {
  position: fixed; left: 18px; bottom: 18px; z-index: 60;
  width: 56px; height: 56px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  background: #25d366; color: #fff;
  box-shadow: 0 12px 30px -8px rgba(37, 211, 102, .6);
  transition: transform .2s ease, box-shadow .2s ease;
}
.fs-wa:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 16px 36px -8px rgba(37, 211, 102, .8); }
.fs-wa svg { width: 30px; height: 30px; }

/* ---- Back-to-top button ---- */
.fs-totop {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 46px; height: 46px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-dark-700, #2d2d2d); color: #fff;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .55);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, background-color .2s ease, color .2s ease;
}
.fs-totop.is-shown { opacity: 1; visibility: visible; transform: translateY(0); }
.fs-totop:hover { background: var(--color-brand, #f79531); color: #111; }
.fs-totop svg { width: 22px; height: 22px; }
@media (min-width: 640px) { .fs-totop { width: 50px; height: 50px; } }

/* ---- Google Maps embed ---- */
.fs-map { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: .75rem; overflow: hidden; }
.fs-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Blog article prose ---- */
.blog-prose { color: #d1d5db; font-size: 1.0625rem; line-height: 1.75; }
.blog-prose > * + * { margin-top: 1.25rem; }
.blog-prose h2 { color: #fff; font-size: 1.5rem; font-weight: 700; margin-top: 2.5rem; }
.blog-prose h3 { color: #fff; font-size: 1.2rem; font-weight: 700; margin-top: 2rem; }
.blog-prose strong { color: #fff; }
.blog-prose ul { list-style: disc; padding-left: 1.5rem; }
.blog-prose ul > li { margin-top: .5rem; }
.blog-prose a { color: var(--color-brand); text-decoration: underline; }

/* ---- Form feedback ---- */
.fs-form-note { display: none; border-radius: .5rem; padding: .75rem 1rem; font-size: .9rem; }
.fs-form-note.is-shown { display: block; }
.fs-form-note.ok { background: rgba(34,197,94,.12); color: #86efac; border: 1px solid rgba(34,197,94,.3); }
.fs-form-note.err { background: rgba(239,68,68,.12); color: #fca5a5; border: 1px solid rgba(239,68,68,.3); }

/* honeypot */
.fs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Product spec-table collapsible (category pages) ---- */
.fs-spec { max-height: 0; opacity: 0; }
.fs-spec.is-open { max-height: 4000px; opacity: 1; }