/* =========================================================================
   tokens.css — Design token-leri (CSS custom property)
   Mercedes-Benz Autostar Azerbaycan · T-209 · Dalga D2
   =========================================================================

   MENBELER (her token-in yaninda konkret menbe serhde gosterilib):
     [CSSVAR]  analysis/qlobal/agent-qlobal-cssvars.json — yunan saytinin :root deyisenleri
     [MAINCSS] analysis/qlobal/css/main.css              — orijinal CSS qaydasi (sitat)
     [COMPUTED]analysis/*.json                           — Playwright getComputedStyle olcmesi
     [TOKENS]  analysis/design-tokens.json               — D1 agentinin token yigimi
     [VERIFY]  analysis/VERIFY-SUMMARY.txt               — skeptik yoxlamanin DUZELISLERI
     [REF]     docs/REFERENCE_ANALYSIS.md                — tesdiqlenmis xulase

   ZIDDIYYET QAYDASI: [VERIFY] > [MAINCSS]/[CSSVAR] > [COMPUTED] > [TOKENS] > [REF]

   ADLANDIRMA: --mb-<kateqoriya>-<ad>
     color · font · text · space · layout · bp · radius · shadow · motion · z

   BU FAYL YALNIZ DEYERLERI SAXLAYIR. Komponent stilleri burada YAZILMIR.
   ========================================================================= */

:root {

  /* =======================================================================
     1. RENGLER
     ======================================================================= */

  /* --- Brend / aksent ---------------------------------------------------- */
  --mb-color-accent:            #0078d6; /* [CSSVAR] --UI-Brand--Primary, --branding--button-background-color */
  --mb-color-accent-hover:      #014880; /* [CSSVAR] --branding--button-background-color-hover */
  --mb-color-accent-link:       #036dc1; /* [CSSVAR] --UI-Brand--Button-Tertiary-Color (tertiary duyme metni) */
  --mb-color-secondary:         #000000; /* [CSSVAR] --UI-Brand--Secondary */

  /* --- Metn --------------------------------------------------------------- */
  --mb-color-text:              #767676; /* [CSSVAR] --UI-Brand--Base-Color · body deyeri; ana sehifede 566 elementde olculdu [COMPUTED] */
  --mb-color-text-heading:      #333333; /* [CSSVAR] --UI-Brand--Text-Secondary · h1/h2/.title rengi */
  --mb-color-text-on-dark:      #ffffff; /* [COMPUTED] tund fon uzerinde metn (home: 579 element) */
  --mb-color-text-form-label:   #404040; /* [COMPUTED] model sehifesi form etiketleri (40 element) */
  --mb-color-text-muted:        #8e8e8e; /* [CSSVAR] --v-font-color-root */

  /* --- Fon / seth --------------------------------------------------------- */
  --mb-color-bg:                #ffffff; /* [CSSVAR] --UI-Brand--Body-Bg */
  --mb-color-bg-tertiary:       #f8f8f8; /* [CSSVAR] --UI-Brand--Tertiary-1-Custom, --branding--background-tertiary */
  --mb-color-bg-section:        #e5e5e5; /* [MAINCSS] .homepage:not(.our-brands) .belu--001A{background:#e5e5e5!important} — "Modeller" bolmesinin fonu [REF §5.2] */
  --mb-color-bg-dark:           #262626; /* [MAINCSS] .inset-dark .inset{background:#262626} — highlights-is-dark varianti (17/32 model sehifesi) */
  --mb-color-bg-footer:         #000000; /* [MAINCSS] .footer-container{background:#000} + #pre-footer-wrap [VERIFY: iki ayri qara zona var] */
  --mb-color-bg-header:         #000000; /* [MAINCSS] .header-container{background:#000} — adi sehifeler */
  --mb-color-bg-header-overlay: rgba(0, 0, 0, 0.35); /* [COMPUTED] yalniz .homepage / .newcars.details / .our-brands.details — sekil uzerinde */
  --mb-color-bg-nav-pill:       #1a1a1a; /* [MAINCSS] .nav>li>a:before{background:#1a1a1a} — hover pill */
  --mb-color-bg-dropdown-hover: #e8e8e8; /* [COMPUTED] dropdown element hover fonu */
  --mb-color-bg-account-icon:   #4f4f4f; /* [COMPUTED] header "My Account" dairesi */
  --mb-color-bg-btn-sec-hover:  #ebebeb; /* [CSSVAR] --branding--button-secondary-background-color-hover */
  --mb-color-bg-overlay-pill:   rgba(0, 0, 0, 0.5); /* [MAINCSS] .franchises-wrap:before{background:rgba(0,0,0,.5)} [VERIFY: elementin ozu seffafdir] */

  /* --- Serhed / boz ------------------------------------------------------- */
  --mb-color-border:            #e8e8e8; /* [CSSVAR] --UI-Brand--Grey-Light · kart/panel serhedi (model sehifesinde 89 element) */
  --mb-color-grey:              #c2c2c2; /* [CSSVAR] --UI-Brand--Grey */
  --mb-color-grey-mid-light:    #dbdbdb; /* [CSSVAR] --UI-Brand--Grey-Mid-Light */
  --mb-color-grey-mid-dark:     #696969; /* [CSSVAR] --UI-Brand--Grey-Mid-Dark · footer bolucu xetti */
  --mb-color-grey-dark:         #171717; /* [CSSVAR] --UI-Brand--Grey-Dark */
  --mb-color-border-button:     #bbbbbb; /* [CSSVAR] --UI-Brand--Button-Secondary-Border-Color */

  /* --- Footer ------------------------------------------------------------- */
  --mb-color-footer-link:       #c9c9c9; /* [COMPUTED] footer link (21 element) */
  --mb-color-footer-link-hover: #f8f8f8; /* [COMPUTED] footer link hover */
  --mb-color-footer-body:       #bbbbbb; /* [COMPUTED] footer govde metni (83 element) */
  --mb-color-footer-hr:         #808080; /* [COMPUTED] .breadcrumb-spacer hr — DIQQET: main.css-de bu hex YOXDUR, yalniz computed style-dan geldi */

  /* --- Karusel pager ------------------------------------------------------ */
  --mb-color-pager:             #999999; /* [MAINCSS] [class*=cycle-pager-container] ul li a{background:#999} */
  --mb-color-pager-active:      #333333; /* [VERIFY] aktiv noqte #333333 (kataloq pager stili) */

  /* --- Brend variantlari -------------------------------------------------- */
  --mb-color-red:               #b21e23; /* [MAINCSS] .red .btn{background-color:#b21e23} — AMG/qirmizi duyme varianti */
  --mb-color-red-hover:         #86171a; /* [TOKENS] color.brand_variants.amg_primary_hover */

  /* --- Neytral ------------------------------------------------------------ */
  --mb-color-white:             #ffffff;
  --mb-color-black:             #000000;


  /* =======================================================================
     2. TIPOQRAFIYA — AILELER
     [CSSVAR] --UI-Brand--Font-Family / --UI-Brand--Font-Face / --UI-Brand--Icon-Font
     Fayllar: theme/assets/css/fonts.css
     ======================================================================= */

  --mb-font-body:  'corpo-s-cyrillic', Arial, Verdana, Helvetica, sans-serif; /* [CSSVAR] --UI-Brand--Font-Family · [MAINCSS] html{font-family:corpo-s-cyrillic,...} */
  --mb-font-title: 'corpo-a', Arial, Verdana, Helvetica, sans-serif;          /* [CSSVAR] --UI-Brand--Font-Face · h1/h2/.title */
  --mb-font-icon:  'mercedes-benz-cars-middle-east-s', 'master-v10';          /* [CSSVAR] --UI-Brand--Icon-Font · [MAINCSS] .icon:before */

  --mb-font-weight-regular: 400; /* [MAINCSS] h1,h2{font-weight:400} */
  --mb-font-weight-bold:    700; /* [CSSVAR] --UI-Brand--Button-Font-Weight: bold */


  /* =======================================================================
     3. TIPOQRAFIYA — KOK VE SABIT OLCULER
     [MAINCSS] html{font-size:16px;line-height:1.4}
     ======================================================================= */

  --mb-text-root-size:         16px;    /* [MAINCSS] html{font-size:16px} */
  --mb-text-root-line-height:  1.4;     /* [MAINCSS] html{line-height:1.4} */

  --mb-text-body-size:         1rem;    /* 16px — [COMPUTED] body/p */
  --mb-text-body-line-height:  22.4px;  /* [COMPUTED] 16 x 1.4 = 22.4px */

  --mb-text-h1-size:           1.875rem; /* 30px — [MAINCSS] .h1,h1{font-size:1.875rem} */
  --mb-text-h2-size:           1.5rem;   /* 24px — [TOKENS] typography.scale.h2 */
  --mb-text-h3-size:           1.125rem; /* 18px — [TOKENS] typography.scale.h3 */
  --mb-text-h4-size:           1rem;     /* 16px govdede; footer .title-de 18px — [TOKENS] typography.scale.h4 */

  --mb-text-nav-size:          15px;    /* [COMPUTED] .nav>li>a font-size */
  --mb-text-nav-line-height:   83px;    /* [COMPUTED] .nav>li>a line-height = header hundurluyu */
  --mb-text-button-size:       1rem;    /* [CSSVAR] --UI-Brand--Button-Font-Size */
  --mb-text-button-line-height:44px;    /* [MAINCSS] .btn{line-height:44px} */
  --mb-text-icon-size:         18px;    /* [MAINCSS] .icon{font-size:18px} */


  /* =======================================================================
     4. TIPOQRAFIYA — FLUID BASLIQ SISTEMI
     -----------------------------------------------------------------------
     ⚠ Yunan sayti CLAMP ISTIFADE ETMIR. Xalis xetti interpolyasiya:
        font-size: calc(MIN + (MAX - MIN) * ((100vw - 768px) / (1600 - 768)))
     Bu o demekdir ki, 768px-den asagi ve 1600px-den yuxari EKSTRAPOLYASIYA
     olunur (kicilmeye/boyumeye limit YOXDUR). Replikasiyada clamp() yazsaq
     1903px-de olcu SEHV cixar — ona gore burada da clamp yoxdur.
     [MAINCSS] 40 ayri fluid qayda tapildi; asagidakilar realda istifade
     olunanlardir.

     Duzgunluk yoxlanisi (nisbet r = (100vw - 768) / 832):
        1903px -> r = 1.3641827 · 390px -> r = -0.4543269
        title-big  @1903 = 52 + 9r  = 64.2776px  ✓ [COMPUTED] olculen 64.2776px
        title-big  line-height 1.1  = 70.7054px  ✓ [COMPUTED] olculen 70.7054px
        title-med  @1903 = 38 + 7r  = 47.5493px  ✓ [COMPUTED] olculen 47.5493px
        title-med  @390  = 38 + 7r  = 34.8197px  ✓ [COMPUTED] olculen 34.8197px
     ======================================================================= */

  --mb-text-fluid-min-vw: 768;  /* [MAINCSS] formulun asagi ucu */
  --mb-text-fluid-max-vw: 1600; /* [MAINCSS] formulun yuxari ucu */
  --mb-text-fluid-span:   832;  /* 1600 - 768 */

  /* Ana basliq — .theme--homepage-big.jump .title / .theme--internal-big.jump .title
     [MAINCSS] @media (min-width:768px){...{font-size:calc(52px + (61 - 52) * ((100vw - 768px) / (1600 - 768)))}}
     ⚠ <768px-de bu deyer ISLEMIR — orada sabit 41px olur (asagida --mb-text-title-big-mobile). */
  --mb-text-title-big:        calc(52px + (61 - 52) * ((100vw - 768px) / (1600 - 768)));
  --mb-text-title-big-mobile: 41px; /* [MAINCSS] ...{font-size:calc(29px + (43 - 29) * ...);font-size:41px} — ikinci bildiris qalib gelir */
  --mb-text-title-big-lh:     1.1;  /* [MAINCSS] line-height:1.1 → 1903px-de 70.7054px */

  /* Ana basliq — "title-lg" varianti
     [MAINCSS] .title-lg.theme--internal-big.jump .title{font-size:calc(60px + (69 - 60) * ...)} → @1903 = 72.2776px */
  --mb-text-title-big-lg: calc(60px + (69 - 60) * ((100vw - 768px) / (1600 - 768)));

  /* Modul basligi — .theme--internal-medium.jump .title
     [MAINCSS] font-size:calc(38px + (45 - 38) * ...) → @1903 = 47.5493px · line-height 1.2 = 57.0591px */
  --mb-text-title-medium:    calc(38px + (45 - 38) * ((100vw - 768px) / (1600 - 768)));
  --mb-text-title-medium-lh: 1.2;
  /* [MAINCSS] .title-lg.theme--internal-medium.jump .title{font-size:calc(38px + (57 - 38) * ...)} → @1903 = 63.9195px */
  --mb-text-title-medium-lg: calc(38px + (57 - 38) * ((100vw - 768px) / (1600 - 768)));

  /* Kicik modul basligi — .theme--homepage-small.jump .title (weight 700)
     [MAINCSS] calc(24px + (33 - 24) * ...) → @1903 = 36.2776px */
  --mb-text-title-small: calc(24px + (33 - 24) * ((100vw - 768px) / (1600 - 768)));

  /* .theme--internal-small.jump .title — [MAINCSS] calc(20px + (23 - 20) * ...) → @1903 = 24.0925px */
  --mb-text-title-xsmall: calc(20px + (23 - 20) * ((100vw - 768px) / (1600 - 768)));

  /* .theme--basic.jump .title — [MAINCSS] calc(21px + (23 - 21) * ...) → @1903 = 23.7284px */
  --mb-text-title-basic: calc(21px + (23 - 21) * ((100vw - 768px) / (1600 - 768)));

  /* Karusel basligi/straplinei — .theme--homepage.module-cycle .title/.strapline
     [MAINCSS] calc(22px + (28 - 22) * ...) → @1903 = 30.1851px */
  --mb-text-cycle-title: calc(22px + (28 - 22) * ((100vw - 768px) / (1600 - 768)));

  /* .theme--basic.module-cycle .title/.strapline (weight 700)
     [MAINCSS] calc(17px + (21 - 17) * ...) → @1903 = 22.4567px */
  --mb-text-cycle-title-basic: calc(17px + (21 - 17) * ((100vw - 768px) / (1600 - 768)));

  /* Hero strapline — .theme--homepage.jumps-cycle .strapline
     [MAINCSS] @media (min-width:768px){...calc(53px + (58 - 53) * ...)} → @1903 = 59.8209px
     ⚠ <768px-de sabit 41px (line-height 1.1). */
  --mb-text-strapline-hero: calc(53px + (58 - 53) * ((100vw - 768px) / (1600 - 768)));

  /* Modal / off-canvas basligi — .modal-title, .slide-out-toggle .toggle-title
     [MAINCSS] calc(20px + (25 - 20) * ...) → @1903 = 26.8209px · @390 = 17.7284px [COMPUTED tesdiq] */
  --mb-text-title-modal: calc(20px + (25 - 20) * ((100vw - 768px) / (1600 - 768)));

  /* CMS h1 (ana sehife) — [MAINCSS] .homepage .cms h1{font-size:calc(50px + (79 - 50) * ...);line-height:1.2} → @1903 = 89.5613px */
  --mb-text-cms-h1-home: calc(50px + (79 - 50) * ((100vw - 768px) / (1600 - 768)));
  /* CMS h1 (daxili) — [MAINCSS] .cms h1{font-size:calc(38px + (45 - 38) * ...);line-height:1.2} */
  --mb-text-cms-h1: calc(38px + (45 - 38) * ((100vw - 768px) / (1600 - 768)));


  /* =======================================================================
     5. BOSLUQ (SPACING)
     [MAINCSS] utility siniflari .pt-N .pb-N .pl-N .pr-N .mt-N .mb-N .ml-N .mr-N
     Addim 10px, 0-dan 70-e qeder. Responsiv suffiks: @sm @md @lg @xl
     ======================================================================= */

  --mb-space-0: 0;
  --mb-space-1: 10px;
  --mb-space-2: 20px;
  --mb-space-3: 30px;
  --mb-space-4: 40px;
  --mb-space-5: 50px;
  --mb-space-6: 60px;
  --mb-space-7: 70px;

  /* Bloklar arasi standart aralig
     [MAINCSS] .container+.container,.container-wrap+.container-wrap,.row-fluid+.row-fluid{margin-top:1.875rem} */
  --mb-space-block-gap: 1.875rem; /* 30px */

  /* Sutun gutter — [MAINCSS] .row-fluid,[class*=layout]{margin-inline:-10px} → sutunlar arasi 20px */
  --mb-space-gutter: 10px;


  /* =======================================================================
     6. LAYOUT
     ======================================================================= */

  /* Istifadecinin ekrani — pixel-perfect etalonu [CLAUDE.md §1.2] */
  --mb-layout-reference-width: 1903px;

  /* Sira konteyneri — [MAINCSS] .row--max-1700{margin-inline:auto;max-width:1700px}
     width:96vw YALNIZ @media(min-width:979px)-den etibaren elave olunur.
     1903px-de faktiki en 1700px, sol/sag kenar 101.5px [COMPUTED] */
  --mb-layout-row-max:   1700px;
  --mb-layout-row-width: 96vw; /* yalniz >=979px */

  /* Yan padding — [COMPUTED] header/footer .container-fluid: 0 40px (>=1200px, pl-4@lg/pr-4@lg)
     Kicik ekranlarda: 10px (<568px, pl-1) → 20px (>=568px, pl-2@sm) → 40px (>=1200px, pl-4@lg) */
  --mb-layout-pad-x:    40px;
  --mb-layout-pad-x-sm: 20px;
  --mb-layout-pad-x-xs: 10px;

  /* Bootstrap-2 legacy konteyner enleri — [MAINCSS] .container{width:...}
     ⚠ [REF §5.3] Bunlar LEGACY-dir, real layout-da demek olar istifade olunmur.
     Replikasiyada esas olcu --mb-layout-row-max (1700px) ve --mb-layout-pad-x (40px)-dir. */
  --mb-layout-container-base: 0 10px;  /* [MAINCSS] .container{margin:0 10px} (<768px) */
  --mb-layout-container-sm:   724px;   /* [MAINCSS] @media(min-width:768px){.container{width:724px}} */
  --mb-layout-container-md:   940px;   /* [MAINCSS] @media(min-width:979px){.container{width:940px}} */
  --mb-layout-container-lg:   1170px;  /* [MAINCSS] @media(min-width:1200px){.container{width:1170px}} */
  --mb-layout-container-xl:   1540px;  /* [MAINCSS] @media(min-width:1600px){.container{width:1540px}} */

  /* Header — [COMPUTED] */
  --mb-layout-header-height:        83px;    /* >=979px */
  --mb-layout-header-height-mobile: 82px;    /* <979px */
  --mb-layout-header-hidden-top:    -140px;  /* [MAINCSS] .homepage.is-scrolling-down:not(.is-top) .header-container{top:-140px!important} */

  /* Ana sehife hero — [VERIFY] hero konteyneri position:fixed, sonraki bolmeler ustunden sururur */
  --mb-layout-hero-height:      100vh;  /* 1903x1080 viewport-da 1080px */
  --mb-layout-content-offset:   166px;  /* [MAINCSS] .homepage #content-wrap{margin-top:166px} — is-top halinda */

  /* Sticky brend pill — [MAINCSS] .homepage .sticky{top:100px;z-index:1200}
     [MAINCSS] .franchises-wrap{max-width:454px;padding:4px;top:-28px;width:calc(100% - 40px)} */
  --mb-layout-sticky-top:       100px;
  --mb-layout-pill-max-width:   454px;
  --mb-layout-pill-padding:     4px;


  /* =======================================================================
     7. BREAKPOINT-LER
     -----------------------------------------------------------------------
     ⚠ TEXNIKI QEYD: CSS custom property-ler @media sertinde ISLEMIR
        (@media (min-width: var(--mb-bp-md)) — bu QANUNSUZDUR).
        Bu deyerler senedlesdirme + JS/inline stil ucundur. @media
        bloklarinda REQEM birbasa yazilmalidir.

     [MAINCSS] main.css-de cemi 20 unikal media query var. Hamisi asagida.
     ======================================================================= */

  --mb-bp-xs:  567px;  /* @media (max-width:567px) */
  --mb-bp-sm:  568px;  /* @media (min-width:568px) */
  --mb-bp-md:  768px;  /* @media (min-width:768px) — utility suffiksi @sm */
  --mb-bp-nav: 979px;  /* @media (min-width:979px) — utility suffiksi @md · KRITIK KESID: desktop nav <-> hamburger */
  --mb-bp-lg:  1200px; /* @media (min-width:1200px) — utility suffiksi @lg */
  --mb-bp-xl:  1600px; /* @media (min-width:1600px) — utility suffiksi @xl */

  /* "max-width" kesidleri (breakpoint - 1px) — [MAINCSS] real qaydalardan */
  --mb-bp-max-tablet:  978px;  /* @media (max-width:978px) — mobil menyu, dil deyisdiricinin order:-1 qaydasi */
  --mb-bp-max-md:      1199px; /* @media (max-width:1199px) */
  --mb-bp-max-lg:      1599px; /* @media (max-width:1599px) */
  --mb-bp-max-phone:   767px;  /* @media (max-width:767px) */

  /* Diger real media query-ler (senedlesdirme ucun, token deyil):
       @media (min-width:768px) and (max-width:978px)
       @media (min-width:979px) and (max-width:1199px)
       @media (min-width:1200px) and (max-width:1599px)
       @media (min-width:979px) and (max-height:800px)
       @media (min-width:1599px) and (min-height:799px)
       @media (max-height:650px)
       @media (min-width:48rem) · @media (min-width:61.1875rem) · @media (max-width:47.9rem)
       @media (-ms-high-contrast:none)                                            [MAINCSS] */


  /* =======================================================================
     8. KUNC YUVARLAQLIGI (RADIUS)
     ======================================================================= */

  --mb-radius-base:      10px;  /* [CSSVAR] --UI-Brand--Border-Radius, --v-border-radius-root, --v-card-border-radius */
  --mb-radius-button:    30px;  /* [CSSVAR] --UI-Brand--Button-Border-Radius · [MAINCSS] .btn{border-radius:30px} */
  --mb-radius-input:     30px;  /* [CSSVAR] --v-text-field-border-radius */
  --mb-radius-pill:      99px;  /* [MAINCSS] .franchises-wrap{border-radius:99px} + .jump.franchise-badge{border-radius:99px} */
  --mb-radius-nav-pill:  18px;  /* [COMPUTED] .nav>li>a:before{border-radius:18px} */
  --mb-radius-dropdown:  10px;  /* [COMPUTED] dropdown paneli */
  --mb-radius-dropdown-item: 5px; /* [COMPUTED] dropdown elementi */
  --mb-radius-social:    10px;  /* [COMPUTED] footer sosial ikon <a> */
  --mb-radius-circle:    50%;   /* [COMPUTED] account ikonu, pager noqtesi */
  --mb-radius-round:     100%;  /* [COMPUTED] mobil menyu baglama duymesi */
  --mb-radius-mobile-panel: 10px 0 0 10px; /* [COMPUTED] mobil menyu paneli (sagdan acilir) */


  /* =======================================================================
     9. KOLGE (SHADOW)
     ======================================================================= */

  --mb-shadow-header:   0 0 5px rgba(0, 0, 0, 0.3);   /* [COMPUTED] .header-container (>=768px) */
  --mb-shadow-dropdown: 0 4px 6px rgba(0, 0, 0, 0.3); /* [COMPUTED] dropdown paneli */
  --mb-shadow-panel:    0 2px 10px rgba(0, 0, 0, 0.2);/* [MAINCSS] .slide-out-toggle>.toggle-body{box-shadow:0 2px 10px rgba(0,0,0,.2)}
                                                          ⚠ [VERIFY] D1-in "0 5px 15px rgba(0,0,0,0.5)" deyeri SEHVDIR — o, mobil
                                                          menyu ile qarisdirilmisdi. Duzgun deyer budur (hem CSS, hem computed). */
  --mb-shadow-card:     0 0 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1); /* [VERIFY] stok karti .inset */
  --mb-shadow-card-md:  0 4px 9px 1px rgba(0, 0, 0, 0.11); /* [TOKENS] shadow.card_medium */


  /* =======================================================================
     10. ANIMASIYA (MOTION)
     Yunan saytinda demek olar butun kecidler 0.4s ease-in-out-dur.
     ======================================================================= */

  --mb-motion-duration:      0.4s;         /* [MAINCSS] standart — header, nav, dropdown panel, mobil menyu, pill */
  --mb-motion-duration-fast: 0.25s;        /* [COMPUTED] dropdown elementi: padding + background-color */
  --mb-motion-duration-slow: 0.6s;         /* [MAINCSS] .btn{transition:all .6s ease,...} */
  --mb-motion-ease:          ease-in-out;  /* [MAINCSS] hemise ease-in-out */

  --mb-motion-default:  0.4s ease-in-out;  /* [MAINCSS] umumi kecid */
  --mb-motion-header:   top 0.4s ease-in-out; /* [MAINCSS] header gizlenme/qayitma */
  --mb-motion-button:   all 0.6s ease, background-color 0.6s ease-in-out, color 0.3s ease-in-out;
                        /* [MAINCSS] .btn,button,input[type=button],input[type=submit]{transition:...}
                           ⚠ Bu qayda YALNIZ >=768px-de aktivdir. */
  --mb-motion-dropdown-item: padding 0.25s ease-in-out, background-color 0.25s ease-in-out; /* [COMPUTED] */

  /* Sekil hover boyudulmesi
     [MAINCSS] .jump.scale-image--hover .inset:hover img{transform:scale(1.08)}
     [MAINCSS] .jump.scale-image--hover.scale-big .inset:hover img{transform:scale(1.04)} */
  --mb-motion-image-scale:     1.08;
  --mb-motion-image-scale-big: 1.04;

  /* Kart duymelerinin asagidan qalxmasi
     [MAINCSS] .ani--text-01 .inset .content .button{opacity:0;transform:translateY(87px);
               transition:all .4s ease-in-out} → hover-de opacity:1; translateY(0) */
  --mb-motion-button-rise: 87px;

  /* Buzlu suse effekti
     [MAINCSS] .franchises-wrap{backdrop-filter:blur(10px)}
     [VERIFY] .header-container:before{backdrop-filter:blur(10px)} — D1-de atlanmisdi */
  --mb-motion-blur: blur(10px);


  /* =======================================================================
     11. Z-INDEX SKALASI
     [COMPUTED] + [MAINCSS] · [VERIFY] hero memarligi
     -----------------------------------------------------------------------
     ⚠ KRITIK: ana sehifede hero position:fixed + z-index 0-dir; ondan sonraki
        HER bolme wrapper-i position:relative + z-index 5 + qeyri-seffaf fon ile
        onun ustunden sururur ("perde/reveal" effekti). Adi axan blok kimi
        qursaq effekt itir. [VERIFY — ana sehife, kritik]
     ======================================================================= */

  --mb-z-hero:        0;    /* [VERIFY] hero konteyneri (position:fixed) */
  --mb-z-section:     5;    /* [VERIFY]+[COMPUTED] hero ustunden sururen bolme wrapper-leri */
  --mb-z-dropdown:    10;   /* [COMPUTED] .dropdown-menu */
  --mb-z-logo:        105;  /* [COMPUTED] header loqosu */
  --mb-z-footer:      900;  /* [MAINCSS] .footer-container .container-wrap{position:relative;z-index:900} */
  --mb-z-header-row:  1021; /* [COMPUTED] header daxili sira */
  --mb-z-header:      1049; /* [MAINCSS] .header-container{...z-index:1049} */
  --mb-z-modal:       1050; /* [MAINCSS] .modal{...z-index:1050} */
  --mb-z-sticky:      1200; /* [MAINCSS] .homepage .sticky{top:100px;z-index:1200} — brend pill */
  --mb-z-offcanvas:   2000; /* [COMPUTED] mobil menyu paneli + contact slide-out */
  --mb-z-nav-pill:    -1;   /* [COMPUTED] .nav>li>a:before (linkin arxasinda) */
  /* Osano cookie banneri: z-index 214748 [MAINCSS] .osano-cm-window{z-index:214748} —
     3-cu terefdir, token kimi verilmir [REF §6]. */


  /* =======================================================================
     12. DUYME BAZA DEYERLERI (token seviyyesi — komponent stili DEYIL)
     [MAINCSS] .btn{...border-radius:30px;font-size:1rem;font-weight:700;
                    line-height:44px;min-height:1em;padding:0 2.5em;border:1px solid}
     Faktiki hundurluk: 44px + 2x1px serhed = 46px [COMPUTED]
     ======================================================================= */

  --mb-button-height:       46px;   /* [COMPUTED] olculen qutu hundurluyu */
  --mb-button-line-height:  44px;   /* [MAINCSS] */
  --mb-button-padding-x:    2.5em;  /* [MAINCSS] padding:0 2.5em (16px koke gore 40px) */
  --mb-button-border-width: 1px;    /* [CSSVAR] --UI-Brand--Button-Border-Width */
}