/* ==================================================================
   ELX-SHARED.CSS — shared utility & component classes
   ==================================================================
   Generated for the inline-style cleanup pass. Pulls the REPEATED
   inline style="" declarations out of the .cshtml views into small,
   composable classes (utilities) plus a handful of named components
   for recognizably-structural UI parts (eyebrow label, icon badge,
   FAQ button, form field, pill CTA, ...).

   WHAT'S DELIBERATELY *NOT* HERE, AND WHY
   site.css's mobile layer (~line 126 onward) targets specific inline
   style="" substrings directly, e.g. [style*="display:grid"],
   [style*="gap: 56px"], [style*="font-size: 40px"], section[style*=
   "padding"] -- because the original markup is 100% inline-style and
   that was the only hook available. This file's codemod deliberately
   leaves every one of those tracked values physically inline (never
   moves them into a class), so nothing here changes mobile behavior.
   That's why you'll still see e.g. style="display: grid;" or a
   heading's font-size sitting next to a class= on many elements --
   that's intentional, not leftover work.
   ================================================================== */

/* ---- 1. LAYOUT — display, flex, grid, position, misc box (57) ---- */
.u-flex { display: flex; }
.u-inline-flex { display: inline-flex; }
.u-block { display: block; }
.u-inline-block { display: inline-block; }
.u-none { display: none; }
.u-contents { display: contents; }
.u-inline-grid { display: inline-grid; }
.u-flex-col { flex-direction: column; }
.u-flex-col-rev { flex-direction: column-reverse; }
.u-wrap { flex-wrap: wrap; }
.u-items-center { align-items: center; }
.u-items-start { align-items: flex-start; }
.u-items-end { align-items: flex-end; }
.u-items-stretch { align-items: stretch; }
.u-items-baseline { align-items: baseline; }
.u-justify-center { justify-content: center; }
.u-justify-between { justify-content: space-between; }
.u-justify-start { justify-content: flex-start; }
.u-justify-end { justify-content: flex-end; }
.u-justify-around { justify-content: space-around; }
.u-place-center { place-items: center; }
.u-self-end { align-self: end; }
.u-self-stretch { align-self: stretch; }
.u-flex-fixed { flex: 0 0 auto; }
.u-flex-grow { flex: 1 1 0%; }
.u-flex-1 { flex: 1; }
.u-relative { position: relative; }
.u-absolute { position: absolute; }
.u-static { position: static; }
.u-inset-0 { inset: 0px; }
.u-top-0 { top: 0px; }
.u-left-0 { left: 0px; }
.u-right-0 { right: 0px; }
.u-bottom-0 { bottom: 0px; }
.u-z-1 { z-index: 1; }
.u-z-2 { z-index: 2; }
.u-overflow-hidden { overflow: hidden; }
.u-text-center { text-align: center; }
.u-text-left { text-align: left; }
.u-text-right { text-align: right; }
.u-cursor-pointer { cursor: pointer; }
.u-no-underline { text-decoration: none; }
.u-list-none { list-style: none; }
.u-outline-none { outline: none; }
.u-border-0 { border: 0px; }
.u-no-events { pointer-events: none; }
.u-w-full { width: 100%; }
.u-h-full { height: 100%; }
.u-mx-auto { margin: 0px auto; }
.u-m-0 { margin: 0px; }
.u-opacity-0 { opacity: 0; }
.u-opacity-1 { opacity: 1; }
.u-transition-bg { transition: background 0.2s; }
.u-minw-0 { min-width: 0px; }
.u-maxw-container { max-width: var(--container); }
.u-text-pretty { text-wrap: pretty; }
.u-text-balance { text-wrap: balance; }

/* ---- 2. SPACING — gap, margin-top, margin-bottom (55) ---- */
.u-gap-2 { gap: 2px; }
.u-gap-3 { gap: 3px; }
.u-gap-4 { gap: 4px; }
.u-gap-5 { gap: 5px; }
.u-gap-6 { gap: 6px; }
.u-gap-7 { gap: 7px; }
.u-gap-8 { gap: 8px; }
.u-gap-9 { gap: 9px; }
.u-gap-10 { gap: 10px; }
.u-gap-11 { gap: 11px; }
.u-gap-12 { gap: 12px; }
.u-gap-13 { gap: 13px; }
.u-gap-14 { gap: 14px; }
.u-gap-15 { gap: 15px; }
.u-gap-16 { gap: 16px; }
.u-gap-18 { gap: 18px; }
.u-gap-20 { gap: 20px; }
.u-gap-22 { gap: 22px; }
.u-gap-24 { gap: 24px; }
.u-gap-26 { gap: 26px; }
.u-gap-28 { gap: 28px; }
.u-gap-30 { gap: 30px; }
.u-mt-1 { margin-top: 1px; }
.u-mt-2 { margin-top: 2px; }
.u-mt-3 { margin-top: 3px; }
.u-mt-4 { margin-top: 4px; }
.u-mt-5 { margin-top: 5px; }
.u-mt-6 { margin-top: 6px; }
.u-mt-7 { margin-top: 7px; }
.u-mt-8 { margin-top: 8px; }
.u-mt-9 { margin-top: 9px; }
.u-mt-10 { margin-top: 10px; }
.u-mt-14 { margin-top: 14px; }
.u-mt-16 { margin-top: 16px; }
.u-mt-18 { margin-top: 18px; }
.u-mt-20 { margin-top: 20px; }
.u-mt-26 { margin-top: 26px; }
.u-mt-30 { margin-top: 30px; }
.u-mt-36 { margin-top: 36px; }
.u-mt-40 { margin-top: 40px; }
.u-mb-3 { margin-bottom: 3px; }
.u-mb-5 { margin-bottom: 5px; }
.u-mb-6 { margin-bottom: 6px; }
.u-mb-7 { margin-bottom: 7px; }
.u-mb-8 { margin-bottom: 8px; }
.u-mb-9 { margin-bottom: 9px; }
.u-mb-10 { margin-bottom: 10px; }
.u-mb-12 { margin-bottom: 12px; }
.u-mb-14 { margin-bottom: 14px; }
.u-mb-16 { margin-bottom: 16px; }
.u-mb-18 { margin-bottom: 18px; }
.u-mb-20 { margin-bottom: 20px; }
.u-mb-22 { margin-bottom: 22px; }
.u-mb-26 { margin-bottom: 26px; }
.u-mb-28 { margin-bottom: 28px; }

/* ---- 3. SIZING — width / height (icon & box scale) (82) ---- */
.u-w-2 { width: 2px; }
.u-w-3 { width: 3px; }
.u-w-4 { width: 4px; }
.u-w-5 { width: 5px; }
.u-w-6 { width: 6px; }
.u-w-7 { width: 7px; }
.u-w-8 { width: 8px; }
.u-w-9 { width: 9px; }
.u-w-10 { width: 10px; }
.u-w-11 { width: 11px; }
.u-w-12 { width: 12px; }
.u-w-13 { width: 13px; }
.u-w-14 { width: 14px; }
.u-w-15 { width: 15px; }
.u-w-16 { width: 16px; }
.u-w-17 { width: 17px; }
.u-w-18 { width: 18px; }
.u-w-19 { width: 19px; }
.u-w-20 { width: 20px; }
.u-w-21 { width: 21px; }
.u-w-22 { width: 22px; }
.u-w-23 { width: 23px; }
.u-w-24 { width: 24px; }
.u-w-26 { width: 26px; }
.u-w-28 { width: 28px; }
.u-w-30 { width: 30px; }
.u-w-32 { width: 32px; }
.u-w-34 { width: 34px; }
.u-w-36 { width: 36px; }
.u-w-38 { width: 38px; }
.u-w-40 { width: 40px; }
.u-w-42 { width: 42px; }
.u-w-44 { width: 44px; }
.u-w-46 { width: 46px; }
.u-w-48 { width: 48px; }
.u-w-50 { width: 50px; }
.u-w-52 { width: 52px; }
.u-w-54 { width: 54px; }
.u-w-56 { width: 56px; }
.u-w-58 { width: 58px; }
.u-w-96 { width: 96px; }
.u-h-2 { height: 2px; }
.u-h-3 { height: 3px; }
.u-h-4 { height: 4px; }
.u-h-5 { height: 5px; }
.u-h-6 { height: 6px; }
.u-h-7 { height: 7px; }
.u-h-8 { height: 8px; }
.u-h-9 { height: 9px; }
.u-h-10 { height: 10px; }
.u-h-11 { height: 11px; }
.u-h-12 { height: 12px; }
.u-h-13 { height: 13px; }
.u-h-14 { height: 14px; }
.u-h-15 { height: 15px; }
.u-h-16 { height: 16px; }
.u-h-17 { height: 17px; }
.u-h-18 { height: 18px; }
.u-h-19 { height: 19px; }
.u-h-20 { height: 20px; }
.u-h-21 { height: 21px; }
.u-h-22 { height: 22px; }
.u-h-23 { height: 23px; }
.u-h-24 { height: 24px; }
.u-h-26 { height: 26px; }
.u-h-28 { height: 28px; }
.u-h-30 { height: 30px; }
.u-h-32 { height: 32px; }
.u-h-34 { height: 34px; }
.u-h-36 { height: 36px; }
.u-h-38 { height: 38px; }
.u-h-40 { height: 40px; }
.u-h-42 { height: 42px; }
.u-h-44 { height: 44px; }
.u-h-46 { height: 46px; }
.u-h-48 { height: 48px; }
.u-h-50 { height: 50px; }
.u-h-52 { height: 52px; }
.u-h-54 { height: 54px; }
.u-h-56 { height: 56px; }
.u-h-58 { height: 58px; }
.u-h-96 { height: 96px; }

/* ---- 4. TYPOGRAPHY — family, weight, size, line-height, letter-spacing (72) ---- */
.u-fs-token-base { font-size: var(--fs-base); }
.u-fs-token-sm { font-size: var(--fs-sm); }
.u-font-display { font-family: var(--font-display); }
.u-font-body { font-family: var(--font-body); }
.u-fw-400 { font-weight: 400; }
.u-fw-500 { font-weight: 500; }
.u-fw-600 { font-weight: 600; }
.u-fw-700 { font-weight: 700; }
.u-fw-800 { font-weight: 800; }
.u-uppercase { text-transform: uppercase; }
.u-fs-9 { font-size: 9px; }
.u-fs-9-5 { font-size: 9.5px; }
.u-fs-10 { font-size: 10px; }
.u-fs-10-5 { font-size: 10.5px; }
.u-fs-11 { font-size: 11px; }
.u-fs-11-5 { font-size: 11.5px; }
.u-fs-12 { font-size: 12px; }
.u-fs-12-5 { font-size: 12.5px; }
.u-fs-13 { font-size: 13px; }
.u-fs-13-5 { font-size: 13.5px; }
.u-fs-14 { font-size: 14px; }
.u-fs-14-5 { font-size: 14.5px; }
.u-fs-15 { font-size: 15px; }
.u-fs-15-5 { font-size: 15.5px; }
.u-fs-16 { font-size: 16px; }
.u-fs-16-5 { font-size: 16.5px; }
.u-fs-17 { font-size: 17px; }
.u-fs-17-5 { font-size: 17.5px; }
.u-fs-18 { font-size: 18px; }
.u-fs-18-5 { font-size: 18.5px; }
.u-fs-19 { font-size: 19px; }
.u-fs-20 { font-size: 20px; }
.u-fs-21 { font-size: 21px; }
.u-fs-22 { font-size: 22px; }
.u-fs-23 { font-size: 23px; }
.u-fs-24 { font-size: 24px; }
.u-fs-25 { font-size: 25px; }
.u-fs-26 { font-size: 26px; }
.u-fs-27 { font-size: 27px; }
.u-fs-29 { font-size: 29px; }
.u-lh-0-95 { line-height: 0.95; }
.u-lh-1 { line-height: 1; }
.u-lh-1-1 { line-height: 1.1; }
.u-lh-1-12 { line-height: 1.12; }
.u-lh-1-14 { line-height: 1.14; }
.u-lh-1-15 { line-height: 1.15; }
.u-lh-1-16 { line-height: 1.16; }
.u-lh-1-18 { line-height: 1.18; }
.u-lh-1-2 { line-height: 1.2; }
.u-lh-1-25 { line-height: 1.25; }
.u-lh-1-3 { line-height: 1.3; }
.u-lh-1-35 { line-height: 1.35; }
.u-lh-1-4 { line-height: 1.4; }
.u-lh-1-45 { line-height: 1.45; }
.u-lh-1-5 { line-height: 1.5; }
.u-lh-1-55 { line-height: 1.55; }
.u-lh-1-6 { line-height: 1.6; }
.u-lh-1-65 { line-height: 1.65; }
.u-lh-1-7 { line-height: 1.7; }
.u-lh-1-75 { line-height: 1.75; }
.u-ls-n03 { letter-spacing: -0.03em; }
.u-ls-n02 { letter-spacing: -0.02em; }
.u-ls-n01 { letter-spacing: -0.01em; }
.u-ls-0 { letter-spacing: 0; }
.u-ls-002 { letter-spacing: 0.02em; }
.u-ls-004 { letter-spacing: 0.04em; }
.u-ls-006 { letter-spacing: 0.06em; }
.u-ls-008 { letter-spacing: 0.08em; }
.u-ls-01 { letter-spacing: 0.1em; }
.u-ls-014 { letter-spacing: 0.14em; }
.u-ls-02 { letter-spacing: 0.2em; }
.u-ls-024 { letter-spacing: 0.24em; }

/* ---- 5. TEXT COLOR (15) ---- */
.u-c-navy300-fb { color: var(--navy-300,#6f89ad); }
.u-c-navy { color: var(--navy-500); }
.u-c-navy300 { color: var(--navy-300); }
.u-c-orange { color: var(--orange-500); }
.u-c-grey { color: var(--grey); }
.u-c-ink { color: var(--ink); }
.u-c-white { color: rgb(255, 255, 255); }
.u-c-success { color: var(--success); }
.u-c-danger { color: var(--danger); }
.u-c-blue { color: var(--blue-500); }
.u-c-ondark { color: var(--text-on-dark-muted); }
.u-c-mist-a { color: rgb(169, 184, 204); }
.u-c-mist-b { color: rgb(195, 207, 224); }
.u-c-mist-c { color: rgb(234, 240, 248); }
.u-c-mist-d { color: rgb(228, 234, 243); }

/* ---- 6. BACKGROUND (22) ---- */
.u-bg-transparent { background: transparent; }
.u-bg-paper { background: var(--paper); }
.u-bg-line { background: var(--line); }
.u-bg-orange { background: var(--orange-500); }
.u-bg-navy { background: var(--navy-500); }
.u-bg-navy600 { background: var(--navy-600); }
.u-bg-navy50 { background: var(--navy-50); }
.u-bg-page { background: var(--bg); }
.u-bg-white { background: rgb(255, 255, 255); }
.u-bg-orange50 { background: var(--orange-50); }
.u-bg-orange-tint { background: rgba(247, 144, 30, 0.16); }
.u-bg-orange-faint { background: rgba(247, 144, 30, 0.04); }
.u-bg-success-bg { background: var(--success-bg); }
.u-bg-danger-bg { background: var(--danger-bg); }
.u-bg-halo-orange { background: var(--halo-orange); }
.u-bg-halo-blue { background: var(--halo-blue); }
.u-bg-white-04 { background: rgba(255, 255, 255, 0.04); }
.u-bg-white-06 { background: rgba(255, 255, 255, 0.06); }
.u-bg-white-08 { background: rgba(255, 255, 255, 0.08); }
.u-bg-white-10 { background: rgba(255, 255, 255, 0.1); }
.u-bg-white-14 { background: rgba(255, 255, 255, 0.14); }
.u-bg-mist { background: rgb(244, 247, 251); }

/* ---- 7. BORDER / RADIUS / SHADOW (21) ---- */
.u-border-l-accent { border-left: 3px solid var(--orange-500); }
.u-border-2-line { border: 2px solid var(--line); }
.u-shadow-xs { box-shadow: var(--shadow-xs); }
.u-shadow-sm { box-shadow: var(--shadow-sm); }
.u-radius-circle { border-radius: 50%; }
.u-radius-pill { border-radius: 999px; }
.u-radius-6 { border-radius: 6px; }
.u-radius-8 { border-radius: 8px; }
.u-radius-9 { border-radius: 9px; }
.u-radius-10 { border-radius: 10px; }
.u-radius-11 { border-radius: 11px; }
.u-radius-12 { border-radius: 12px; }
.u-radius-13 { border-radius: 13px; }
.u-radius-14 { border-radius: 14px; }
.u-radius-16 { border-radius: 16px; }
.u-radius-18 { border-radius: 18px; }
.u-radius-24 { border-radius: 24px; }
.u-border-line { border: 1px solid var(--line); }
.u-border-t-line { border-top: 1px solid var(--line); }
.u-border-b-line { border-bottom: 1px solid var(--line); }
.u-border-r-line { border-right: 1px solid var(--line); }

/* ---- 8. COMPONENTS — small named UI parts composed from the utilities above (13) ---- */
.elx-eyebrow { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; font-size: 13px; color: var(--orange-500); }
.elx-icon { place-items: center; flex: 0 0 auto; }
.elx-tick-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--orange-500); }
.elx-bullet-sq { width: 6px; height: 6px; background: var(--orange-500); flex: 0 0 auto; }
.elx-faq-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; text-align: left; border: 0px; cursor: pointer; padding: 24px 22px; }
.elx-collapse { overflow: hidden; max-height: 0px; opacity: 0; transition: max-height .3s var(--ease-out),opacity .2s; }
.elx-field { width: 100%; padding: 12px 14px; font-family: var(--font-body); font-size: 14.5px; border: 1px solid var(--line); border-radius: 10px; outline: none; }
.elx-hs-form { min-height: 240px; width: 100%; }
.elx-hs-form iframe { width: 100% !important; max-width: 100%; }
/* CTA butonlari anasayfadaki .elx-btn ile ayni dile cekildi: keskin kose
   (border-radius:0) ve 58px yukseklik. Eski 999px pill gorunumu alt
   sayfalari ana tasarim dilinden koparıyordu; sinif adlari markup'ta
   yaygin oldugu icin korunuyor. */
.elx-pill-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--orange-500); color: rgb(255, 255, 255); font-family: var(--font-display); font-weight: 700; font-size: 15px; min-height: 58px; padding: 0 30px; border-radius: 0; transition: background 0.18s, transform 0.18s; }
.elx-pill-btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: rgba(255, 255, 255, 0.06); color: rgb(255, 255, 255); font-family: var(--font-display); font-weight: 700; font-size: 15px; min-height: 58px; padding: 0 30px; border-radius: 0; border: 1px solid rgba(255, 255, 255, 0.22); transition: background 0.18s; }
.elx-card { display: flex; align-items: flex-start; gap: 12px; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.elx-list-plain { list-style: none; margin: 0px; padding: 0px; }
.elx-stat-block { font-family: var(--font-display); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: rgb(255, 255, 255); margin-bottom: 10px; }
.elx-tab-toggle { height: 6px; border: 0px; padding: 0px; cursor: pointer; transition: width 0.3s, background 0.3s; }
.elx-tab-anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; pointer-events: none; scroll-margin-top: 120px; }
/* "Neden X?" problem/reason cards -- markup already carried an orphaned
   "scpN" class (leftover styled-components name with no matching CSS
   anywhere, not even in the original static export) plus a transition
   list hinting at the intended hover, but no border and no :hover rule
   ever existed. Restored to match the site's existing hover-lift language
   (.elx-lift / .elx-tile / .elx-megacard). */
.elx-problem-card { border: 1px solid var(--line); }
.elx-problem-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -22px rgba(22, 51, 91, .35); border-color: var(--orange-500); }

/* icon-left hizmet kartlari (eskiden scp4): sol kenardaki u-border-l-accent
   (3px turuncu) korunuyor -- border shorthand yerine top/right/bottom
   kullanilir, boylece o utility ile catismaz. */
.elx-service-card { border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.elx-service-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -22px rgba(22, 51, 91, .35); border-color: var(--orange-500); }

/* Donen etiketler (elx-cyc3/4): HTML left:50% + transform:translate(-50%)
   ile ortalanir, ama site.css'teki son @keyframes yalnizca translateY /
   none kullanir ve yatay -50%'yi ezer — etiket sol kenari merkeze yapisir.
   CSS `translate` ozelligi transform animasyonundan bagimsizdir.
   Siber Guvenlik etiketleri left:0 kullandigi icin bu kurala girmez. */
.elx-cyc3[style*="left: 50%"],
.elx-cyc4[style*="left: 50%"] {
  translate: -50% 0;
}

/* ------------------------------------------------------------------
   "Neden X?" fact strip — mobile only
   Desktop keeps the side-by-side (stat | body) layout. On phones the
   title sits above the copy so nothing overflows the viewport.
   Covers .elx-fact / .elx-fact-panel / .elx-fact-a and unlabeled
   flex rows that use the same orange display-stat + body column.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
  /* Mobil hamburger: sticky header viewport'tan uzun olunca sayfa
     kayıyor, mega menünün altı görünmüyordu. Menü açıkken gövdeyi
     kilitle, kaydırmayı header/nav içinde tut. */
  html:has(#elx-navtoggle:checked) {
    overflow: hidden;
  }
  header:has(#elx-navtoggle:checked) {
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
  }
  header:has(#elx-navtoggle:checked) > .u-c-ondark {
    flex: 0 0 auto;
  }
  header:has(#elx-navtoggle:checked) .elx-hdr {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    align-content: flex-start;
    align-self: stretch;
    background: #fff;
    padding-bottom: 24px !important;
  }
  header:has(#elx-navtoggle:checked) .elx-mainnav {
    overflow: visible;
  }

  .elx-fact,
  .elx-fact-panel,
  .elx-fact-a,
  .elx-fact-b,
  .u-flex:has(> span.u-font-display.u-flex-fixed.u-c-orange) {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .elx-factstat,
  .elx-fact > span.u-flex-fixed,
  .elx-fact-panel > span.u-flex-fixed,
  .elx-fact-a > span.u-flex-fixed,
  .elx-fact-b > span.u-flex-fixed,
  .u-flex > span.u-font-display.u-flex-fixed.u-c-orange {
    flex: 0 1 auto !important;
    white-space: normal !important;
    font-size: clamp(28px, 9vw, 40px) !important;
    width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
    line-height: 1.1 !important;
  }

  .elx-factbody,
  .elx-fact > div,
  .elx-fact-panel > div,
  .elx-fact-a > div,
  .elx-fact-b > div,
  .u-flex:has(> span.u-font-display.u-flex-fixed.u-c-orange) > div {
    border-left: 0 !important;
    padding-left: 0 !important;
    width: 100%;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  .elx-fact p,
  .elx-factbody p,
  .elx-fact-panel p,
  .elx-fact-a p,
  .elx-fact-b p,
  .u-flex:has(> span.u-font-display.u-flex-fixed.u-c-orange) p {
    font-size: 16px !important;
    max-width: 100% !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
  }

  /* HP yetkili servis: stacked absolute slides must grow with wrapped text */
  .u-relative:has(> .u-absolute.u-flex > span.u-font-display.u-flex-fixed.u-c-orange) {
    min-height: 0 !important;
    height: auto !important;
    display: grid;
  }
  .u-relative:has(> .u-absolute.u-flex > span.u-font-display.u-flex-fixed.u-c-orange) > .u-absolute.u-flex {
    position: relative !important;
    inset: auto !important;
    grid-area: 1 / 1;
    width: 100%;
  }

  .u-flex:has(.elx-fact-source),
  .u-flex[style*="white-space: nowrap"]:has(.elx-fact-source) {
    flex-wrap: wrap !important;
    white-space: normal !important;
    max-width: 100%;
  }

  /* Danışmanlık hero art: 640px is far taller than the SVG, and
     DESTEK/YÖNETİM labels sit past the viewBox (overflow:visible). */
  .elx-svc-hero {
    height: min(300px, 72vw) !important;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  .elx-svc-hero > svg {
    transform: scale(0.84);
    transform-origin: left center;
    max-width: none;
  }

  /* Hakkımızda — yolculuk adımları: yıl kutusu önceki metne binmesin */
  .elx-journey {
    gap: 36px 0 !important;
  }
  .elx-journey .elx-node {
    padding-top: 22px !important;
  }

  /* Hakkımızda — ekip fotoğrafı isim etiketleri görseli kapatmasın */
  .elx-team-shot {
    height: min(380px, 92vw) !important;
  }
  .elx-team-tag {
    min-width: 0 !important;
    max-width: 42%;
    padding: 5px 8px !important;
    background: rgba(255, 255, 255, 0.48) !important;
    box-shadow: none !important;
  }
  .elx-team-tag .u-fs-17,
  .elx-team-tag .u-fs-18 {
    font-size: 11px !important;
  }
  .elx-team-tag .u-fs-11,
  .elx-team-tag .u-fs-11-5 {
    font-size: 8px !important;
    letter-spacing: 0.06em !important;
  }
  .elx-team-tag .u-mt-4 { margin-top: 2px !important; }
  .elx-team-tag .u-mt-3 { margin-top: 1px !important; }
  .elx-team-tag .u-mt-8 { margin-top: 4px !important; }
  .elx-team-tag .u-bg-orange {
    width: 36px !important;
  }

  /* Kurumsal Ağ — hero SVG 460px canvas; overlay nodes use px coords.
     Scale the whole canvas to the viewport instead of stretching width.
     100cqi / 460 is invalid (cqi vs unitless); use 460px so the scale
     actually applies and labels stay inside the square. */
  .elx-net-art {
    width: min(100%, 380px);
    height: auto !important;
    aspect-ratio: 1 / 1;
    transform: none !important;
    overflow: hidden;
    margin-inline: auto;
    container-type: inline-size;
    display: grid !important;
    place-items: center;
  }
  .elx-net-art .elx-net-canvas {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 460px !important;
    height: 460px !important;
    margin: -230px 0 0 -230px;
    transform: scale(min(1, 100cqi / 540px));
    transform-origin: center center;
  }

  /* Mimari diyagram: taşan uptime / çağrı kutuları */
  .elx-arch-diagram {
    overflow: hidden;
    min-width: 0;
  }
  .elx-arch-diagram > .u-absolute {
    left: 8px !important;
    right: 8px !important;
    max-width: calc(100% - 16px) !important;
    width: auto;
  }
  .elx-arch-diagram > .u-absolute[style*="bottom"] {
    left: auto !important;
  }
  .elx-arch-diagram > .u-absolute[style*="top: 34px"] {
    right: auto !important;
  }

  /* Sekme içi özellik ızgarası — satırlar üst üste binmesin */
  .elx-tab-features {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .elx-tab-features > div {
    min-width: 0;
  }
  .elx-tabbody {
    padding: 24px 18px !important;
  }

  /* KVKK/GDPR — 820×620 radial diagram; absolute side cards clip on phones.
     Scale yaklaşımı 375px'te metni okunmaz küçültüyordu (0.42x); bunun yerine
     çipler dikey listeye döner, halka gizlenir, "Tam Koruma" çekirdeği üstte durur. */
  .elx-kv-art {
    width: 100%;
    max-width: 520px;
    height: auto !important;
    margin-inline: auto;
  }
  .elx-kv-art .elx-kv-canvas {
    width: 100% !important;
    height: auto !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 214px;
  }
  .elx-kv-art .elx-kv-canvas > svg { display: none; }
  .elx-kv-art .elx-kv-canvas > div[style*="width: 310px"] {
    position: static;
    width: 100% !important;
    transform: none !important;
    animation: none !important;
  }
  .elx-kv-art .elx-kv-canvas > div[style*="width: 186px"] {
    top: 0 !important;
    transform: translate(-50%, 0) !important;
  }

  /* Veri Depolama — hero SVG'sinin katman etiketleri (HİBRİT/ARŞİV KATMANI)
     viewBox dışına taşacak şekilde konumlanmış ve svg overflow:visible.
     Telefonda etiketler ekranın dışına çıkıyor; tuvali küçültüp içeri al. */
  .elx-ds-hero-art {
    height: 320px !important;
    margin-bottom: 36px;
  }
  .elx-ds-hero-art > svg {
    transform: scale(0.8);
  }
  /* %99,99 istatistik kartı FLASH KATMAN etiketinin üstüne biniyordu;
     telefonda kanvasın altına indirilir. */
  .elx-ds-hero-art > div.u-absolute[style*="bottom: 8px"] {
    bottom: -30px !important;
  }

  /* Sanallaştırma — katman etiketleri (SANAL MAKİNELER / HİPERVİZÖR /
     FİZİKSEL SUNUCU HAVUZU) viewBox dışına yazılıp overflow:visible ile
     telefonda sayfa dışına taşıyor. */ 
  .elx-virt-hero-art {
    height: 280px !important;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    container-type: inline-size;
  }
  .elx-virt-hero-art > svg {
    /* +8px: SANAL MAKİNELER / FİZİKSEL SUNUCU HAVUZU etiketleri solda
       viewport dışına birkaç px taşıyordu */
    transform: translateX(8px) scale(min(0.82, 100cqi / 520px));
    transform-origin: center 42%;
  }

  /* Siber Güvenlik — 7/24 orange card must sit BELOW the caption
     "Katmanlı savunma · tehdit dış katmanda durdurulur", not over the
     isometric diagram. Leave absolute desktop placement unchanged. */
  .elx-sg-art {
    height: min(340px, 88vw) !important;
    margin-bottom: 36px;
  }
  .elx-sg-art > svg {
    top: -28px !important;
    height: calc(100% + 36px) !important;
  }
  .elx-sg-chip {
    top: 0 !important;
    left: 0 !important;
  }
  .elx-sg-art > .u-absolute.u-left-0.u-right-0[style*="bottom: -22px"] {
    bottom: -6px !important;
  }
  .elx-sg-watch {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 1;
    width: max-content;
    max-width: 100%;
    margin: 4px 0 12px auto;
  }

  /* think-cell hero PPT mock — 520px grid track + non-shrinking
     waterfall columns overflow the phone viewport. */
  .elx-tc-hero {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .elx-tc-ppt-wrap,
  .elx-tc-ppt {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .elx-tc-chart-pad {
    padding: 18px 14px 20px !important;
  }
  .elx-tc-chart {
    gap: 6px !important;
  }
  .elx-tc-chart > div {
    min-width: 0;
  }
  .elx-tc-float {
    left: 8px !important;
    bottom: -28px !important;
  }
  .elx-pboard-kpis {
    gap: 6px;
  }
  .elx-pboard-kpis > div {
    min-width: 0;
    flex: 1;
  }
  .elx-pboard-kpis .u-fs-19 {
    font-size: 13px !important;
  }

  /* think-cell "4 adımda değer" döner vitrini: genel mobil kuralı inline
     min-height:520px'i 200px'e ezince 4 animasyonlu kart alttan kırpılıyordu.
     Sahneye slaytların en uzununa yetecek yükseklik geri verilir. */
  .u-self-stretch.u-relative:has(> .u-absolute[style*="tc-vis"]) {
    min-height: 440px !important;
  }

  /* Servis sayfası hero'ları (Siber Güvenlik, Bulut, Sunucu, Veri Depolama,
     Veri Merkezi): %-konumlu yüzen çip katmanı, site.css'teki ana sayfa
     520px-kanvas kuralından (width:520 + scale + translate) etkilenip
     kenarlardan kesiliyordu. Bu overlay'lerde kanvas kuralı geri alınır;
     katman içeri çekilir ki translate(-50%)'li çipler (~124px) sığsın. */
  .elx-hero-art > div.u-inset-0:has(> div[style*="%"][style*="translate(-50%"]) {
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    inset: 0 62px !important;
  }

  /* Anasayfa Hakkımızda — kart tek kolona inince "38+ yıllık tecrübe"
     kutusu ve rozet listesi hem birbirine hem görsele biniyordu. Mobilde
     ikisini de akışa alıp kartın üstünde karşılıklı yerleştir; masaüstündeki
     absolute yerleşim değişmiyor. */
  .elx-abt-visual {
    min-height: 0 !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "chips badge"
      "card card";
    align-items: start;
    gap: 0 12px;
  }
  .elx-abt-card {
    grid-area: card;
    position: relative !important;
    inset: auto !important;
  }
  .elx-abt-chips {
    grid-area: chips;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    align-items: flex-start;
    margin-bottom: 14px;
  }
  .elx-abt-badge {
    grid-area: badge;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    margin-bottom: 14px;
  }
}

@media (max-width: 680px) {
  .elx-svc-hero {
    height: min(240px, 68vw) !important;
  }
  .elx-svc-hero > svg {
    transform: scale(0.82);
  }

  .elx-journey {
    gap: 44px 0 !important;
  }
  .elx-journey .elx-node {
    padding-top: 28px !important;
  }

  .elx-team-shot {
    height: min(280px, 88vw) !important;
  }
  .elx-team-tag {
    max-width: 40%;
    padding: 4px 6px !important;
    background: rgba(255, 255, 255, 0.4) !important;
  }
  .elx-team-tag .u-fs-17,
  .elx-team-tag .u-fs-18 {
    font-size: 10px !important;
  }

  .elx-pboard-kpis .u-fs-19 {
    font-size: 12px !important;
  }

  .elx-sg-art {
    height: min(300px, 86vw) !important;
    margin-bottom: 40px;
  }
  .elx-sg-watch {
    padding: 12px 14px !important;
    margin-top: 8px;
  }

  /* Sunucu hero — disk yığınının yan eksen etiketleri merkezden ±330px'e
     kurgulandığı için telefonda iki yandan kesiliyordu; kenarlara alınır,
     noktaların hemen üstünde dururlar. Sağdaki beyaz rozet de içeri çekilir. */
  .elx-sunucu-hero span[style*="margin-right:170px"] {
    right: auto !important; left: 8px !important; margin-right: 0 !important;
    width: auto !important; text-align: left !important; top: 176px !important;
  }
  .elx-sunucu-hero span[style*="margin-left:170px"] {
    left: auto !important; right: 8px !important; margin-left: 0 !important;
    width: auto !important; text-align: right !important; top: 176px !important;
  }
  .elx-sunucu-hero div[style*="right:-24px"] { right: 8px !important; }

  /* Konsolidasyon "Önce/Sonra" mini sunucu ızgaraları: genel mobil kuralı
     3 sütunu tek sütuna indirince aspect-ratio:1/1 kutular tam genişlikte
     kare olup 9 kutu ~2400px kaydırma yaratıyordu. Mini ızgara 3 sütun kalır. */
  div[style*="repeat(3, 1fr)"]:has(> span[style*="aspect-ratio: 1 / 1"]) {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Hero köşe rozeti (VERBİS, ISO vb. — 12 sayfada ortak desen):
     bottom:-44px/left:-16px ile kartın köşesine sabitlenen beyaz rozet,
     telefonda kart içeriğinin (ör. son checklist satırının) üstüne biniyordu.
     Akışa alınır, kartın altında ortalanır. */
  div.u-flex.u-absolute[style*="bottom: -44px"][style*="left: -16px"] {
    position: static !important;
    width: fit-content;
    margin: 16px auto 0;
  }

  /* Danışmanlık gauge görseli — %98 Müşteri Bağlılığı kartı köşeye sabitliyken
     "KURULUM & PROJE" yazısının üstüne biniyordu; akışa alınıp görselin
     altına yerleştirilir. */
  div.u-absolute.top-left-zero-mobile[style*="bottom: -72px"] {
    position: static !important;
    width: fit-content;
    margin: 10px auto 0;
  }

  /* Siber Güvenlik hero — 6 yüzen çip dar ekranda sıkışıp birbirine
     biniyordu. Telefonda kolaj bırakılır: kalkan üstte, çipler altında
     2 sütunlu düzenli ızgara. */
  .elx-hero-art:has(> div.u-inset-0 > div[style*="translate(-50%"][style*="%"]) {
    height: auto !important;
    display: block !important;
    overflow: visible !important;
  }
  .elx-hero-art:has(> div.u-inset-0 > div[style*="translate(-50%"][style*="%"]) > svg {
    position: relative !important;
    inset: auto !important;
    display: block;
    width: min(260px, 76%) !important;
    height: auto !important;
    aspect-ratio: 480 / 500;
    margin: 0 auto;
  }
  .elx-hero-art > div.u-inset-0:has(> div[style*="translate(-50%"][style*="%"]) {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
  }
  .elx-hero-art > div.u-inset-0 > div[style*="translate(-50%"][style*="%"] {
    position: static !important;
    transform: none !important;
    animation: none !important;
    width: auto !important;
    min-width: 0;
  }
  .elx-hero-art > div.u-inset-0 > div[style*="translate(-50%"][style*="%"] > .u-flex {
    width: 100%;
    min-width: 0;
  }

  /* Sunucu hero — beyaz "Sürekli sağlık izleme" rozeti ile %99,95 kartı
     disk animasyonunun üstüne biniyordu; ikisi kanvasın altına (iki satır)
     alınır, MERKEZİ YÖNETİM etiketi yığının üstüne çıkarılır. */
  .elx-sunucu-hero div[style*="right:-24px"][style*="top:-8px"] {
    top: auto !important;
    bottom: -50px !important;
    right: 0 !important;
  }
  .elx-sunucu-hero div[style*="left:-22px"][style*="bottom:-14px"] {
    left: 0 !important;
    bottom: -132px !important;
  }
  .elx-sunucu-hero div[style*="perspective:1100px"] {
    margin-bottom: 144px;
  }
  .elx-sunucu-hero span[style*="top:46px"] {
    top: 0px !important;
  }

  /* Veri Depolama hero — "Gerçek zamanlı replikasyon" rozeti MERKEZİ
     KONTROLCÜ yazısını örtüyordu; kanvasın altına, %99,99 kartının altına
     ikinci satır olarak alınır. */
  .elx-ds-hero-art div.u-absolute[style*="top: 52px"] {
    top: auto !important;
    bottom: -92px !important;
    right: 0 !important;
  }
  .elx-ds-hero-art {
    margin-bottom: 104px !important;
  }

  /* Bulut hero — SVG etiketleri (İhtiyaç analizi / Bakım, izleme…) viewBox
     dışına yazıldığı için overflow:hidden kapta soldan/sağdan kırpılıyordu;
     sahne %90'a küçültülerek içeri alınır. */
  .elx-cfloat.elx-hero-art > svg {
    transform: scale(0.9);
    transform-origin: center;
  }
}

/* Mega menu (Claude Design header) — language dropdown, think-cell CTA,
   vertical sub-lists. Mobile overrides beat site.css's 2-col sub-grid. */
.elx-mico { transition: transform .3s var(--ease-out), background .3s; }

.elx-langtoggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}
.elx-langbtn {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.elx-langmenu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: #fff;
  border-top: 2px solid var(--orange-500);
  box-shadow: var(--shadow-lg);
  min-width: 88px;
  z-index: 200;
}
.elx-langtoggle:checked ~ .elx-langmenu { display: block; }
.elx-langtoggle:focus-visible ~ .elx-langbtn { box-shadow: var(--focus-ring); }
.elx-langopt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 14px;
  color: var(--navy-500);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.elx-langopt-active { background: #fff4eb; }
.elx-langopt:hover { background: var(--bg); }

.elx-tc-cta {
  transition: box-shadow .22s var(--ease-out), border-color .22s, transform .22s;
}
.elx-tc-cta:hover {
  border-color: rgba(196, 30, 58, .45);
  box-shadow: 0 10px 24px -16px rgba(196, 30, 58, .45);
  transform: translateY(-1px);
}

.elx-cardtoggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}
.elx-cardbtn { display: none; }

/* Akıllı Baskı + think-cell: aynı grid hücresinde üst üste, toplam
   yükseklik yandaki tam megacard ile eşit. */
.elx-megastack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  align-self: stretch;
}
.elx-megastack > .elx-megacard {
  flex: 1 1 0;
  min-height: 0;
  justify-content: center;
  padding: 12px 16px !important;
}
.elx-megastack .elx-megatitle > a {
  height: auto !important;
  margin-bottom: 4px !important;
}
.elx-megastack > .elx-megacard > a p {
  height: auto !important;
  margin: 0 !important;
  -webkit-line-clamp: 2;
}

@media (max-width: 900px) {
  .elx-megastack { display: contents; }
  .elx-megastack > .elx-megacard {
    flex: none;
    justify-content: flex-start;
    padding: 8px 0 4px !important;
  }
  .elx-megatitle {
    width: 100%;
    gap: 4px;
  }
  .elx-megatitle > a {
    position: relative;
    z-index: 1;
    min-width: 0;
    margin-bottom: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }
  .elx-cardbtn {
    display: grid !important;
    place-items: center;
    position: relative;
    z-index: 2;
    width: 44px;
    height: 44px;
    margin-left: auto;
    flex: none;
    cursor: pointer;
    color: var(--orange-500);
  }
  .elx-cardtoggle:checked + .elx-cardbtn .elx-chev { transform: rotate(180deg); }
  .elx-cardtoggle:focus-visible + .elx-cardbtn { box-shadow: var(--focus-ring); }

  .elx-megacard > a:first-child {
    margin-bottom: 6px !important;
    height: auto !important;
  }
  .elx-megasubs {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    border-top: 0 !important;
    padding-top: 0 !important;
  }
  .elx-megacard:not(:has(.elx-cardtoggle:checked)) .elx-megasubs,
  .elx-megacard:not(:has(.elx-cardtoggle:checked)) .elx-megabody,
  .elx-svc-col:not(:has(.elx-cardtoggle:checked)) .elx-megabody {
    display: none !important;
  }
  .elx-megacard > a:has(> p) {
    display: none !important;
  }
  /* Mobil menü kompaktlaştırma (28 Ağu 2026 QA): satırlar/ikonlar küçültülür,
     "Çözüm ve Hizmetlerimiz" açıkken tüm başlıklar + Hizmetler tek ekrana
     sığar, kaydırma ihtiyacı ortadan kalkar. */
  .elx-megacard {
    padding: 2px 10px !important;
  }
  .elx-megacard .elx-megatitle a {
    margin-bottom: 0 !important;
    height: 40px !important;
    overflow: hidden !important;
  }
  .elx-megacard .elx-icon,
  .elx-megacard .elx-mico {
    width: 26px !important;
    height: 26px !important;
  }
  .elx-megacard .elx-icon svg,
  .elx-megacard .elx-mico svg {
    width: 17px;
    height: 17px;
  }
  .elx-megacard h4 {
    font-size: 14px !important;
  }
  .elx-cardbtn {
    width: 34px;
    height: 34px;
  }
  .elx-subbtn {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    font-size: 14.5px !important;
  }
  .elx-mainnav > a.elx-nav,
  .elx-mainnav .elx-menuwrap > a.elx-nav {
    padding: 8px 15px !important;
    font-size: 14.5px !important;
  }
  .elx-svc-col > a:first-child,
  .elx-svc-col .elx-megatitle {
    margin-bottom: 4px !important;
    padding-bottom: 4px !important;
  }
  .elx-svc-col {
    grid-area: auto !important;
    padding: 8px 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
  .elx-svc-col > a:first-child {
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
  }
  .elx-svc-col .elx-megatitle {
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
  }
  .elx-svc-col .elx-icon {
    width: 28px !important;
    height: 28px !important;
  }
  .elx-tc-cta {
    margin-top: 4px;
    padding: 10px 12px !important;
  }
}

.elx-crumb-pill {
  display: flex;
  width: max-content;
  max-width: 100%;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 28px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  font-size: 13px;
  line-height: 1.2;
  color: rgb(143, 162, 189);
  white-space: nowrap;
}
.elx-crumb-path,
.elx-crumb-now {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.elx-crumb-pill a {
  color: rgb(143, 162, 189);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  flex: none;
  white-space: nowrap;
}
.elx-crumb-pill a:hover {
  color: #fff;
}
.elx-crumb-pill svg {
  color: rgb(107, 125, 150);
  flex: none;
}
.elx-crumb-turn {
  display: none;
}
.elx-crumb-pill span[aria-current="page"] {
  color: var(--orange-500);
  font-weight: 700;
  font-size: 14px;
  flex: none;
  white-space: nowrap;
}
.elx-hub-hero .elx-crumb-pill {
  background: #fff;
  border-color: var(--line);
}
.elx-hub-hero .elx-crumb-pill a {
  color: var(--grey);
}
.elx-hub-hero .elx-crumb-pill a:hover {
  color: var(--navy-500);
}
@media (max-width: 900px) {
  .elx-crumb-pill {
    gap: 5px;
    margin-bottom: 20px;
    padding: 6px 12px;
  }
  .elx-crumb-path,
  .elx-crumb-now {
    gap: 5px;
  }
  .elx-crumb-pill a {
    font-size: 12px;
  }
  .elx-crumb-pill svg {
    width: 12px;
    height: 12px;
  }
  .elx-crumb-pill span[aria-current="page"] {
    font-size: 12.5px;
  }
}
@media (max-width: 680px) {
  .elx-crumb-pill--deep {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    gap: 0;
    border-radius: 16px;
    padding: 10px 14px;
  }
  .elx-crumb-pill--deep .elx-crumb-path {
    width: 100%;
    flex-wrap: wrap;
    white-space: normal;
  }
  .elx-crumb-pill--deep .elx-crumb-sep {
    display: none;
  }
  .elx-crumb-pill--deep .elx-crumb-now {
    width: 100%;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    gap: 8px;
    min-width: 0;
  }
  .elx-crumb-pill--deep .elx-crumb-turn {
    display: block;
    color: var(--orange-500);
    opacity: 0.9;
  }
  .elx-crumb-pill--deep span[aria-current="page"] {
    white-space: normal;
    line-height: 1.3;
  }
  .elx-hub-hero .elx-crumb-pill--deep .elx-crumb-now {
    border-top-color: var(--line);
  }
}
@media (max-width: 400px) {
  .elx-crumb-pill {
    gap: 4px;
    padding: 5px 10px;
  }
  .elx-crumb-path,
  .elx-crumb-now {
    gap: 4px;
  }
  .elx-crumb-pill a,
  .elx-crumb-pill span[aria-current="page"] {
    font-size: 11.5px;
  }
  .elx-crumb-pill--deep {
    padding: 9px 12px;
  }
}