/* Fusapp Aurora — brand token override layer for the Crafto "Branding Studio" base theme.
   Loaded AFTER vendors.min.css / icon.min.css / style.css / responsive.css / branding-studio.css so
   these CSS custom-property overrides win the cascade. The Crafto layout/component rules themselves
   are untouched — every color/font in style.css already resolves through var(--base-color) /
   var(--primary-font) / var(--alt-font) / var(--dark-gray) / var(--medium-gray) / var(--*-gray)
   (verified: 0 hardcoded brand-blue hex outside the :root declaration), so redeclaring the tokens
   here re-themes the whole component library without touching style.css/responsive.css.
   Token spec: docs/brand/fusapp/palette-v2/PALETTE-SPEC.md ("Aurora" — locked 2026-07-15). */

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/_content/Fusapp.CMS.Theme.Fusapp/assets/fonts/onest-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  /* Covers Turkish-specific letters not in the Latin-1 range: ğĞ şŞ ıİ (Latin Extended-A). */
  src: url("/_content/Fusapp.CMS.Theme.Fusapp/assets/fonts/onest-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Aurora tokens */
  --fx-canvas: #ffffff;
  --fx-surface: #f5f3fc;
  --fx-surface-2: #ece9fb;
  --fx-border: #e4e1f0;
  --fx-ink: #1a1533;
  --fx-muted: #6b6780;
  --fx-violet: #6c47ff;
  --fx-violet-600: #5a34e8;
  --fx-violet-700: #4a28c0;
  --fx-orange: #ff6a2c;
  --fx-orange-600: #f0551a;
  --fx-orange-700: #c8410f;
  --fx-fusion: linear-gradient(90deg, #6c47ff 0%, #ff6a2c 100%);

  /* Crafto tokens re-pointed at Aurora — cascades through style.css's existing var() usages */
  --primary-font: "Onest", sans-serif;
  --alt-font: "Onest", sans-serif;
  --base-color: var(--fx-violet); /* was Crafto blue #2946f3 — violet is now the dominant brand color */
  --dark-gray: var(--fx-ink); /* body/heading text */
  --medium-gray: var(--fx-muted); /* secondary text */
  --very-light-gray: var(--fx-surface); /* section backgrounds */
  --light-medium-gray: var(--fx-surface-2);
  --extra-medium-gray: var(--fx-border);
}

/* Orange is a single-point accent (CTA / hairline) — never a dominant fill. Body text on orange
   fails AA (see PALETTE-SPEC §3), so accent buttons keep ink text, not white. */
.btn.btn-aurora-orange {
  background-color: var(--fx-orange);
  border-color: var(--fx-orange);
  color: var(--fx-ink);
}
.btn.btn-aurora-orange:hover,
.btn.btn-aurora-orange:active {
  background-color: transparent;
  border-color: var(--fx-orange);
  color: var(--fx-orange-700);
}
.fx-accent-text {
  color: var(--fx-orange-700);
}
.fx-fusion-text {
  background: var(--fx-fusion);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Fusewing mark + wordmark lockup (header/footer) */
.fx-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}
.fx-logo svg {
  height: 28px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.fx-logo .fx-wordmark {
  font-family: "Onest", sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--fx-ink);
}
.fx-logo.fx-logo-white .fx-wordmark {
  color: #ffffff;
}

/* Footer newsletter consent checkbox (GORSEL bug fix, Atilla real-device screenshot 2026-07-16):
   the checkbox lives inside .newsletter-style-02 (it shares that wrapper with the email input so
   the form's absolutely-positioned submit button has a relative parent) -- so two of the Crafto
   demo's OWN rules that were only ever meant for the text input leak onto it too: style.css's bare
   `input, select, textarea, .form-control, .form-select { width:100%; padding:12px 25px; ... }` and
   `.newsletter-style-02 input { padding-right:60px !important }` both use plain element selectors,
   so they match ANY <input> descendant, not just the .form-control one. That inflates the checkbox's
   flex-item layout box to a large fraction of the row width, squeezing the consent label into a
   sliver column -- on mobile Safari the label text wrapped one character per line with a large empty
   gap next to it (ground truth: Atilla's iPhone). Reset the checkbox back to native intrinsic sizing
   so it stays a fixed 16px box and the label gets the rest of the row to wrap normally. */
#fx-newsletter-consent[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}

/* Language switch — 4-language pill row (EN | TR | ET | RU), two placements:
   .fx-lang-switch-multi  = desktop-only inline row in the header (d-none d-lg-flex wrapper in
                            _Layout.cshtml) — compact pills, never competes with the hamburger.
   .fx-lang-switch-mobile = mobile-only row rendered INSIDE the hamburger's full-screen menu
                            (d-lg-none wrapper, lives inside #navbarNav so main.js's mobile-menu
                            clone carries it along). Roomier touch targets, styled for the dark
                            full-screen overlay background instead of the white header.
   Revize (2026-07-17, Atilla — GÖRSEL bug fix): previously a single always-visible pill row sat
   inline in the mobile header next to the hamburger toggler and squeezed it at narrow widths
   (~375-390px, hamburger wrapping to its own line or RU pill pushed to the edge). Splitting into
   two placements keeps language switching reachable everywhere without the header competing for
   space. The base .fx-lang-switch a rule below is shared by both. */
.fx-lang-switch a {
  font-family: "Onest", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 5px 12px;
  border: 1px solid currentColor;
  border-radius: 20px;
  opacity: 0.75;
  transition: opacity 0.2s, background-color 0.2s, color 0.2s;
}
.fx-lang-switch a:hover {
  opacity: 1;
}
.fx-lang-switch-multi {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
}
.fx-lang-switch-multi a {
  padding: 4px 9px;
  font-size: 12px;
  opacity: 0.55;
}
.fx-lang-switch-multi a:hover {
  opacity: 0.9;
}
.fx-lang-switch-multi a.active {
  opacity: 1;
  background-color: var(--fx-violet);
  border-color: var(--fx-violet);
  color: #ffffff;
}

/* Mobile full-screen menu variant — sits below the nav-links list inside #navbarNav's clone
   (body[data-mobile-nav-bg-color="#1a1533"] is the dark overlay background the menu shows against,
   so pills need light/inverted coloring instead of the header's dark-on-white default). */
.fx-lang-switch-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px;
  padding-top: 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.fx-lang-switch-mobile a {
  color: #ffffff;
  padding: 6px 14px;
  opacity: 0.65;
}
.fx-lang-switch-mobile a:hover,
.fx-lang-switch-mobile a:focus-visible {
  opacity: 1;
}
.fx-lang-switch-mobile a.active {
  opacity: 1;
  background-color: var(--fx-violet);
  border-color: var(--fx-violet);
  color: #ffffff;
}

/* Our Partners grid (Views/Content/Partners.cshtml) — real brand marks (Simple Icons, CC0-1.0 +
   Vireo's own official icon, see that file's header comment for sourcing) instead of text
   wordmarks. Grayscale+dimmed by default so the grid reads as one consistent "what we build on"
   system rather than a clashing multi-brand-color wall; hover/focus on the tile (not just the
   image) reveals the mark's real color — still nominative, never implies endorsement. */
.partner-logo {
  height: 32px;
  width: auto;
  max-width: 120px;
  filter: grayscale(1) opacity(0.55);
  transition: filter 0.2s ease;
}
.partner-tile:hover .partner-logo,
.partner-tile:focus-visible .partner-logo {
  filter: grayscale(0) opacity(1);
}

/* Section eyebrow pill re-themed to violet-tint surface instead of Crafto's solid base-color pill,
   so it reads as "quiet label" rather than a second CTA competing with the real one. */
.fx-eyebrow {
  display: inline-block;
  font-size: 11px;
  line-height: 26px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fx-violet-700);
  background-color: var(--fx-surface-2);
  border-radius: 30px;
  padding: 0 15px;
  margin-bottom: 20px;
}

/* Team page (Ekibimiz) — agent/founder cards. Editorial treatment: AI-agent cards use a plain
   illustrated-avatar circle; the two human founder cards get a thin Aurora gradient ring
   (--fx-fusion) to visually separate "real photo, still pending" from "AI, illustrated on purpose" —
   never the reverse, so the honesty framing (see Team.cshtml intro copy) holds even before the
   founder photos are uploaded. */
.fx-team-card {
  text-align: center;
  height: 100%;
  padding: 28px 16px;
  border-radius: 15px;
  background-color: var(--fx-canvas);
  box-shadow: 0 15px 40px rgba(26, 21, 51, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fx-team-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 55px rgba(108, 71, 255, 0.18);
}
.fx-team-avatar {
  width: 92px;
  height: 92px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--fx-surface);
}
.fx-team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Ring wrapper for human founder cards — gradient padding creates the "halka", inner canvas-color
   border separates it from the photo/monogram fill so the ring reads as a frame, not a border. */
.fx-team-avatar-ring {
  width: 98px;
  height: 98px;
  margin: 0 auto 16px;
  padding: 3px;
  border-radius: 50%;
  background: var(--fx-fusion);
}
.fx-team-avatar-ring .fx-team-avatar {
  width: 100%;
  height: 100%;
  margin: 0;
  border: 3px solid var(--fx-canvas);
}
.fx-team-monogram {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Onest", sans-serif;
  font-weight: 800;
  font-size: 24px;
  color: #ffffff;
  background-color: var(--fx-violet-700);
}
.fx-team-name {
  font-family: "Onest", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--fx-ink);
  margin-bottom: 3px;
}
.fx-team-role {
  font-size: 12px;
  line-height: 1.4;
  color: var(--fx-muted);
  min-height: 32px;
}
/* Micro-tag under every AI-agent card — keeps the "this is an agent, not a person" framing
   legible on the card itself, not only in the page intro paragraph. */
.fx-team-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fx-violet-700);
  background-color: var(--fx-surface-2);
  border-radius: 20px;
  padding: 2px 9px;
  margin-top: 8px;
}
.fx-team-tag-human {
  color: var(--fx-orange-700);
  background-color: transparent;
}
/* First Response squad — small live-support indicator (ChatWoot integration lands later; badge only for now). */
.fx-team-badge-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #1a9b5c;
  background-color: #e5f7ee;
  border-radius: 20px;
  padding: 2px 9px 2px 8px;
  margin-top: 6px;
}
.fx-team-badge-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #1a9b5c;
  flex-shrink: 0;
}
.fx-team-group-title {
  font-family: "Onest", sans-serif;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--fx-muted);
}
.fx-team-group-title .fx-team-group-desc {
  text-transform: none;
  font-weight: 400;
  letter-spacing: normal;
  opacity: 0.8;
}

/* Mobile horizontal-overflow safety net (Atilla 2026-07-17, GÖRSEL bug fix). body already carries
   .overflow-x-hidden (Crafto's own class, _Layout.cshtml), but that alone doesn't stop the <html>
   root from becoming the scrolling box in every engine, and none of style.css/responsive.css's own
   rules guard the actual content (headline letter-spacing utilities like .ls-minus-3px are fixed
   px values that don't scale down with font-size, so a long heading can overflow a narrow container
   before the wrap happens). h1-h3 word-break is unconditional (inert unless a heading would
   otherwise overflow, so no visual risk on content that already fits) — the container max-width
   guard is deliberately scoped to <=767px only, since Bootstrap's own .container/.container-fluid
   already rely on per-breakpoint max-width for desktop's centered-column layout and an unscoped
   100% would blow that out at every size, not just mobile. */
html {
  overflow-x: hidden;
}
h1,
h2,
h3 {
  overflow-wrap: break-word;
  word-break: break-word;
}
@media (max-width: 767px) {
  .container,
  .container-fluid {
    max-width: 100%;
  }
}

/* Footer social icons row (Views/Shared/_Layout.cshtml .fx-social-icons) — fix (2026-07-18, Atilla
   desktop feedback): this class had no CSS backing in this theme at all, so the <ul><li> list fell
   back to the browser default (block-level <li>, stacked vertically) instead of a horizontal row.
   Ported verbatim from Fusapp.CMS.Theme.FusappGo's aurora.css (go-revize-1, same class name/markup,
   footer social row) — same monochrome pill-outline treatment as that theme's dark footer, not
   Crafto's brand-colored social-icon-style-03 swatches. */
.fx-social-icons {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
}
.fx-social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  font-size: 14px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.fx-social-icons a:hover {
  background-color: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.55);
}

/* ===================================================================
   Blog redesign — Paraşüt-style content-marketing blog (blog-parasut-redesign, 2026-07-18)
   Covers the list surfaces (BlogList / PostCategory / BlogSearch, via the shared _BlogPostCard +
   _BlogCategoryNav + _BlogPagination partials) and the post-detail page (Post.cshtml). ADDITIVE
   ONLY — nothing above this banner is changed. Every color resolves through the Aurora :root tokens
   declared at the top of this file; violet is the primary, orange is a single-point accent (the
   featured eyebrow + the read-more arrow), never a dominant fill (see PALETTE-SPEC §3).
   The list grid is a plain CSS grid (.fx-blog-grid) deliberately detached from Crafto's
   .blog-wrapper isotope masonry — main.js only inits isotope on .blog-wrapper, so this grid stays
   in normal document flow and cards can never fall out onto the footer (the old .grid-sizer trap).
   =================================================================== */

/* ---- Hero search box (BlogList + BlogSearch) ---- */
.fx-blog-search {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 560px;
  background-color: var(--fx-canvas);
  border: 1px solid var(--fx-border);
  border-radius: 40px;
  padding: 6px 6px 6px 20px;
  box-shadow: 0 10px 30px rgba(26, 21, 51, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.fx-blog-search:focus-within {
  border-color: var(--fx-violet);
  box-shadow: 0 12px 34px rgba(108, 71, 255, 0.16);
}
.fx-blog-search__icon {
  display: inline-flex;
  align-items: center;
  color: var(--fx-muted);
  font-size: 17px;
  margin-right: 10px;
  flex-shrink: 0;
}
.fx-blog-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: "Onest", sans-serif;
  font-size: 15px;
  color: var(--fx-ink);
  padding: 10px 6px;
}
.fx-blog-search__input::placeholder {
  color: var(--fx-muted);
  opacity: 0.85;
}
.fx-blog-search__btn {
  flex-shrink: 0;
  border: 0;
  border-radius: 30px;
  background-color: var(--fx-violet);
  color: #ffffff;
  font-family: "Onest", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  padding: 11px 24px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.fx-blog-search__btn:hover,
.fx-blog-search__btn:focus-visible {
  background-color: var(--fx-violet-600);
}

/* ---- Category pill row (restyles _BlogCategoryNav's .tab-style-04, scoped via .fx-cat-pills so no
       other Crafto tab widget is affected — tab-style-04 is used only by this nav in the theme). ---- */
/* Selectors are deliberately over-specified (.fx-cat-pills.tab-style-04 .nav-tabs .nav-item ...)
   to beat Crafto's own .tab-style-04 .nav-tabs .nav-item .nav-link (0,4,0) / .nav-link.active
   (0,5,0) rules in style.css — that file loads first, so order alone would lose to it. */
/* Crafto's tab-style-04 renders the <ul> as display:inline-block and each <li> as display:table
   with 0 35px padding (a centered underline-tab look) — force a real flex pill row instead. */
.fx-cat-pills.tab-style-04 .nav-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  border: 0;
  padding: 0;
}
.fx-cat-pills.tab-style-04 .nav-tabs .nav-item {
  display: block;
  margin: 0;
  padding: 0;
}
.fx-cat-pills.tab-style-04 .nav-tabs .nav-item .nav-link {
  position: relative;
  font-family: "Onest", sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1;
  color: var(--fx-muted);
  background-color: var(--fx-surface);
  border: 1px solid var(--fx-border);
  border-radius: 30px;
  padding: 10px 20px;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.fx-cat-pills.tab-style-04 .nav-tabs .nav-item .nav-link:hover,
.fx-cat-pills.tab-style-04 .nav-tabs .nav-item .nav-link:focus-visible {
  color: var(--fx-violet-700);
  background-color: var(--fx-surface-2);
  border-color: var(--fx-surface-2);
}
.fx-cat-pills.tab-style-04 .nav-tabs .nav-item .nav-link.active {
  color: #ffffff;
  background-color: var(--fx-violet);
  border-color: var(--fx-violet);
}
/* Crafto's .tab-border underline span has no place in a pill — hide it without touching style.css. */
.fx-cat-pills.tab-style-04 .nav-tabs .nav-item .nav-link .tab-border {
  display: none;
}

/* ---- Vertical card grid ---- */
.fx-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.fx-post-cell {
  display: flex;
}
.fx-post-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--fx-canvas);
  border: 1px solid var(--fx-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(26, 21, 51, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.fx-post-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(108, 71, 255, 0.14);
  border-color: var(--fx-surface-2);
}
.fx-post-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  background-color: var(--fx-surface);
  background-size: cover;
  background-position: center;
}
.fx-post-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 24px 24px 26px;
}
.fx-post-card__cat {
  align-self: flex-start;
  font-family: "Onest", sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fx-violet-700);
  background-color: var(--fx-surface-2);
  border-radius: 20px;
  padding: 5px 12px;
  margin-bottom: 15px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.fx-post-card__cat:hover {
  color: #ffffff;
  background-color: var(--fx-violet);
}
.fx-post-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: "Onest", sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.35;
  color: var(--fx-ink);
  margin-bottom: 12px;
  transition: color 0.2s ease;
}
.fx-post-card__title:hover {
  color: var(--fx-violet-700);
}
.fx-post-card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fx-muted);
  margin-bottom: 20px;
}
.fx-post-card__meta {
  margin-top: auto;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fx-muted);
}

/* ---- Featured hero card (BlogList, page 1) ---- */
.fx-featured {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  min-height: 340px;
  background-color: var(--fx-canvas);
  border: 1px solid var(--fx-border);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 22px 55px rgba(26, 21, 51, 0.07);
}
.fx-featured__media {
  display: block;
  min-height: 260px;
  background-color: var(--fx-surface);
  background-size: cover;
  background-position: center;
}
.fx-featured__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 52px;
}
.fx-featured__eyebrow {
  font-family: "Onest", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fx-orange-700);
  margin-bottom: 16px;
}
.fx-featured .fx-post-card__cat {
  margin-bottom: 18px;
}
.fx-featured__title {
  font-family: "Onest", sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--fx-ink);
  margin-bottom: 18px;
  transition: color 0.2s ease;
}
.fx-featured__title:hover {
  color: var(--fx-violet-700);
}
.fx-featured__excerpt {
  font-size: 16px;
  line-height: 1.65;
  color: var(--fx-muted);
  margin-bottom: 20px;
}
.fx-featured__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-family: "Onest", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--fx-orange-700);
  transition: gap 0.2s ease, color 0.2s ease;
}
.fx-featured__more i {
  transition: transform 0.2s ease;
}
.fx-featured__more:hover {
  color: var(--fx-orange-700);
  gap: 12px;
}
.fx-featured__more:hover i {
  transform: translateX(3px);
}

/* ---- Section heading ("Son Eklenenler" / "Öne Çıkanlar") ---- */
.fx-blog-section-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 26px;
}
.fx-blog-section-title {
  font-family: "Onest", sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--fx-ink);
  margin: 0;
  position: relative;
  padding-left: 16px;
}
.fx-blog-section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  border-radius: 3px;
  background: var(--fx-fusion);
}

/* ---- Pagination (restyle _BlogPagination's .pagination-style-01; only this pager uses it) ---- */
.pagination-style-01 .page-item {
  margin: 0 4px;
}
.pagination-style-01 .page-link {
  min-width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--fx-border);
  border-radius: 50%;
  color: var(--fx-muted);
  background-color: var(--fx-canvas);
  font-weight: 600;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.pagination-style-01 .page-link:hover {
  color: var(--fx-violet-700);
  border-color: var(--fx-violet);
  background-color: var(--fx-surface);
}
.pagination-style-01 .page-item.active .page-link {
  color: #ffffff;
  background-color: var(--fx-violet);
  border-color: var(--fx-violet);
}

/* ===================================================================
   Post detail (Post.cshtml) — two-column prose + sticky sidebar
   =================================================================== */
/* Detail cover — constrained banner. The markup used a bare w-100 image, so a square
   (e.g. 800x800) source filled the full column width and rendered ~1000px tall, dwarfing the
   page. Force a wide banner aspect + object-fit so any source crops to a sane height. */
.fx-post-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 460px;
  object-fit: cover;
  border-radius: 16px;
}
.fx-post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 56px;
  align-items: start;
}
.fx-prose {
  max-width: 72ch;
  font-size: 17px;
  line-height: 1.85;
  color: var(--fx-ink);
}
.fx-prose > p {
  margin-bottom: 1.5em;
}
.fx-prose > p:last-child {
  margin-bottom: 0;
}
.fx-prose h2 {
  font-family: "Onest", sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fx-ink);
  margin: 1.9em 0 0.6em;
  scroll-margin-top: 110px;
}
.fx-prose h3 {
  font-family: "Onest", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.35;
  color: var(--fx-ink);
  margin: 1.6em 0 0.5em;
  scroll-margin-top: 110px;
}
.fx-prose h2:first-child,
.fx-prose h3:first-child {
  margin-top: 0;
}

/* Sidebar — sticky column of stacked cards */
.fx-post-sidebar {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.fx-side-card {
  border: 1px solid var(--fx-border);
  border-radius: 18px;
  padding: 26px 24px;
  background-color: var(--fx-canvas);
}
.fx-side-card__title {
  font-family: "Onest", sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fx-muted);
  margin: 0 0 16px;
}
/* Table of contents */
.fx-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fx-toc__list li {
  margin-bottom: 2px;
}
.fx-toc__list a {
  display: block;
  font-size: 14px;
  line-height: 1.45;
  color: var(--fx-muted);
  padding: 7px 0 7px 14px;
  border-left: 2px solid var(--fx-border);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.fx-toc__list a:hover {
  color: var(--fx-violet-700);
  border-color: var(--fx-violet);
}
/* Product invite CTA — quiet violet-tint surface, no metrics/pricing */
.fx-side-cta {
  background-color: var(--fx-surface);
  border-color: var(--fx-surface-2);
}
.fx-side-cta__heading {
  font-family: "Onest", sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.35;
  color: var(--fx-ink);
  margin: 0 0 10px;
}
.fx-side-cta__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fx-muted);
  margin: 0 0 18px;
}
.fx-side-cta__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fx-side-cta__link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: "Onest", sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--fx-violet-700);
  background-color: var(--fx-canvas);
  border: 1px solid var(--fx-border);
  border-radius: 12px;
  padding: 12px 16px;
  transition: border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.fx-side-cta__link:hover {
  color: var(--fx-violet-700);
  border-color: var(--fx-violet);
  transform: translateX(2px);
}
.fx-side-cta__link i {
  color: var(--fx-orange-700);
}
/* Newsletter card (light variant of the footer form; own ids, own bound script in Post.cshtml) */
.fx-side-news__intro {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fx-muted);
  margin: 0 0 16px;
}
.fx-side-news__field {
  display: flex;
  border: 1px solid var(--fx-border);
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--fx-canvas);
  transition: border-color 0.2s ease;
}
.fx-side-news__field:focus-within {
  border-color: var(--fx-violet);
}
.fx-side-news__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: "Onest", sans-serif;
  font-size: 14px;
  color: var(--fx-ink);
  padding: 11px 14px;
}
.fx-side-news__input::placeholder {
  color: var(--fx-muted);
}
.fx-side-news__btn {
  flex-shrink: 0;
  border: 0;
  background-color: var(--fx-violet);
  color: #ffffff;
  font-size: 15px;
  padding: 0 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.fx-side-news__btn:hover {
  background-color: var(--fx-violet-600);
}
.fx-side-news__consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
}
.fx-side-news__consent input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--fx-violet);
}
.fx-side-news__consent label {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--fx-muted);
  margin: 0;
}
.fx-side-news__result {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fx-violet-700);
  margin-top: 10px;
}
/* Post-detail category badge (title block) — a solid violet pill, matching the card category chip. */
.fx-post-cat-badge {
  font-family: "Onest", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  background-color: var(--fx-violet);
  border-radius: 30px;
  padding: 7px 16px;
  transition: background-color 0.2s ease;
}
.fx-post-cat-badge:hover {
  color: #ffffff;
  background-color: var(--fx-violet-600);
}
/* Tag chips under the article body */
.fx-post-tags .categories-btn {
  border-radius: 30px;
}

/* Related posts — divider + centered heading (no left gradient bar in this centered context) */
.fx-related-section {
  border-top: 1px solid var(--fx-border);
  padding-top: 66px;
  margin-top: 20px;
}
.fx-related-head {
  margin-bottom: 30px;
  text-align: center;
}
.fx-related-head .fx-blog-section-title {
  padding-left: 0;
}
.fx-related-head .fx-blog-section-title::before {
  display: none;
}

/* ===================================================================
   Blog responsive
   =================================================================== */
@media (max-width: 1199px) {
  .fx-post-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px;
  }
  .fx-featured__body {
    padding: 40px;
  }
  .fx-featured__title {
    font-size: 28px;
  }
}
@media (max-width: 991px) {
  .fx-blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  /* Sidebar drops below the article on tablet/mobile — no longer sticky */
  .fx-post-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }
  .fx-post-sidebar {
    position: static;
    top: auto;
  }
  .fx-prose {
    max-width: none;
  }
  .fx-featured {
    grid-template-columns: 1fr;
  }
  .fx-featured__media {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
  .fx-featured__body {
    padding: 32px 30px 36px;
  }
  .fx-featured__title {
    font-size: 26px;
  }
}
@media (max-width: 767px) {
  .fx-blog-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  /* Category pills become a horizontal scroll strip on mobile. flex-wrap / justify-content carry
     !important here to beat Bootstrap's .flex-wrap / .justify-content-center utility classes on the
     <ul> (both are !important in bootstrap), which would otherwise wrap the pills onto stacked rows. */
  .fx-cat-pills .nav-tabs {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    margin: 0 -15px;
    padding-left: 15px;
    padding-right: 15px;
    scrollbar-width: none;
  }
  .fx-cat-pills .nav-tabs::-webkit-scrollbar {
    display: none;
  }
  .fx-cat-pills.tab-style-04 .nav-tabs .nav-item {
    flex: 0 0 auto;
  }
  .fx-blog-search {
    max-width: 100%;
  }
  .fx-blog-search__btn {
    padding: 11px 18px;
  }
  .fx-featured__body {
    padding: 28px 24px 32px;
  }
  .fx-featured__title {
    font-size: 23px;
  }
}

/* ===== Home service/product card corner image fix (2026-07-19) =====
   Full fusion photos were placed into the small "services-box-style-08" corner accent slot at
   w-50 (~197px) and overlapped the card copy by ~150px. Render them as a clean rounded thumbnail
   pinned to the bottom-right that clears the text and the CTA arrow. */
.services-box-style-08 img.position-absolute {
  width: 118px !important;
  height: 118px;
  object-fit: cover;
  border-radius: 16px;
  right: 26px !important;
  bottom: 26px !important;
  box-shadow: 0 10px 28px rgba(26, 21, 51, 0.16);
}
@media (max-width: 767px) {
  .services-box-style-08 img.position-absolute {
    width: 92px !important;
    height: 92px;
    right: 18px !important;
    bottom: 18px !important;
  }
}

/* ===== "The Vertical Engine, four moves" hover-reveal preview size (2026-07-19) =====
   The cursor-follow reveal image was rendering at the source's native ~500px width — way too big.
   Constrain to a tidy portrait thumbnail preview. */
.reveal-item-hover .hover-reveal .hover-reveal__img img {
  width: 240px !important;
  height: 320px !important;
  object-fit: cover;
  border-radius: 14px;
}