/*
Theme Name: javiddiesel
Theme URI: https://javiddiesel.com
Author: علی کریمی
Author URI: https://javiddiesel.com
Description: یک قالب اختصاصی ساده برای پنل و سایت من
Version: 1.0
Text Domain: my-custom-theme
*/

/* --- از اینجا به بعد کدهای استایل و CSS خودتان را بنویسید --- */
:root{
    --ink:#14181d;
    --steel-900:#181f27;
    --steel-800:#212a34;
    --steel-700:#333f4c;
    --steel-600:#576474;
    --steel-500:#7c8998;
    --paper:#ffffff;
    --paper-2:#ffffff;
    --line:#e3e3e0;
    --amber:#f0b90d;
    --amber-2:#ffd23f;
    --sync:#4f9b6e;
    --white:#ffffff;
    --sans:'Vazirmatn', system-ui, sans-serif;
    --mono:'Vazirmatn', system-ui, sans-serif;
    --max:1180px;
  }
  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; overflow-x:hidden; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  }
  body{
    margin:0;
    font-family:var(--sans);
    background:var(--paper);
    color:var(--ink);
    line-height:1.7;
    font-size:16px;
    overflow-x:hidden;
  }
  h1,h2,h3{
    font-family:var(--sans);
    font-weight:700;
    line-height:1.35;
    margin:0 0 .5em;
    letter-spacing:-0.01em;
  }
  p{ margin:0 0 1em; color:var(--steel-700); }
  a{ color:inherit; text-decoration:none; }
  img,svg{ display:block; max-width:100%; }
  .mono{ font-family:var(--mono); direction:ltr; unicode-bidi:isolate; }
  .container{ max-width:var(--max); margin:0 auto; padding:0 28px; }
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--amber-2);
    outline-offset:3px;
    border-radius:2px;
  }

  /* ---------- HEADER ---------- */
  .site-header{
    position:sticky; top:0; z-index:50;
    background:var(--steel-900);
    border-bottom:1px solid var(--steel-700);
  }
  .header-inner{
    max-width:var(--max); margin:0 auto; padding:0 28px;
    height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px;
  }
  .logo{ display:flex; align-items:center; gap:10px; }
  .logo-mark{ width:34px; height:34px; flex:none; object-fit:contain; }
  .logo-text{ color:var(--paper); font-weight:700; font-size:1.02rem; white-space:nowrap; }
  .site-nav{ display:flex; gap:30px; }
  .site-nav a{
    color:var(--steel-500); font-size:.92rem; font-weight:500;
    padding:6px 0; border-bottom:1px solid transparent;
    transition:color .15s ease, border-color .15s ease;
  }
  .site-nav a:hover{ color:var(--paper); border-color:var(--amber-2); }
  .header-actions{ display:flex; align-items:center; gap:16px; }
  .nav-cta{
    background:var(--amber); color:var(--steel-900); font-weight:600; font-size:.88rem;
    padding:10px 18px; border-radius:3px; white-space:nowrap;
    transition:background .15s ease;
  }
  .nav-cta:hover{ background:var(--amber-2); }
  .menu-toggle{
    display:none; background:none; border:1px solid var(--steel-700); color:var(--paper);
    width:40px; height:40px; border-radius:3px; cursor:pointer; flex:none;
  }
  .menu-toggle span{
    display:block; width:18px; height:2px; background:var(--paper); margin:4px auto;
  }

  /* ---------- HERO ---------- */
  .hero{ background:#f1f3f6; color:#f1f3f6; overflow:hidden; }
  .hero-inner{
    max-width:var(--max); margin:0 auto; padding:76px 28px 64px;
    display:grid; grid-template-columns:.82fr 1.18fr; gap:36px; align-items:center;
  }
  .hero-label{
    color:var(--amber-2); font-weight:600; font-size:.95rem; margin:0 0 18px;
  }
  .hero h1{
    color:var(--white); font-size:clamp(1.7rem, 2.8vw, 2.5rem); max-width:12ch;
  }
  .hero-sub{ color:var(--steel-500); font-size:1rem; max-width:38ch; margin-bottom:28px; }
  .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:13px 26px; border-radius:3px; font-weight:600; font-size:.95rem;
    border:1px solid transparent; transition:background .15s ease, border-color .15s ease, color .15s ease;
  }
  .btn-primary{ background:var(--amber); color:var(--steel-900); }
  .btn-primary:hover{ background:var(--amber-2); }
  .btn-ghost{ border-color:var(--steel-600); color:var(--paper); }
  .btn-ghost:hover{ border-color:var(--paper); }
  .btn-large{ padding:16px 34px; font-size:1rem; }

  .project-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:16px;
  }
  .project-card{
    position:relative; border-radius:4px; overflow:hidden; aspect-ratio:4/3;
    border:1px solid var(--steel-700); background:var(--steel-800);
  }
  .icon-panel{
    width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    color:var(--paper);
  }
  .icon-panel svg{ width:50%; height:50%; }
  .project-card::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(to top, rgba(20,24,29,.9) 0%, rgba(20,24,29,0) 60%);
  }
  .project-card span{
    position:absolute; right:14px; bottom:13px; left:14px; z-index:1;
    color:var(--paper); font-size:.88rem; font-weight:600;
  }

  /* ---------- STATS ---------- */
  .stats{
    background:var(--steel-800); border-top:1px solid var(--steel-700);
    border-bottom:1px solid var(--steel-700);
  }
  .stats-inner{
    max-width:var(--max); margin:0 auto; padding:26px 28px;
    display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  }
  .stat{ display:flex; align-items:baseline; gap:10px; }
  .stat-num{
    font-family:var(--mono); color:var(--amber-2); font-size:1.4rem; font-weight:600;
    direction:ltr;
  }
  .stat-label{ color:var(--steel-500); font-size:.88rem; }

  /* ---------- SECTION HEAD ---------- */
  .section-head{ max-width:56ch; margin-bottom:44px; }
  .section-head-row{
    max-width:none; display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;
  }
  .section-head-row .section-head-text{ max-width:56ch; margin-bottom:0; }
  .section-head h2{ font-size:clamp(1.5rem, 2.4vw, 2rem); }
  .section-head p{ font-size:1.02rem; }
  section{ padding:80px 0; }

  /* ---------- SERVICES ---------- */
  .services{ background:var(--paper); border-top:1px solid var(--line); }
  .service-list{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;
  }
  .service{
    border:1px solid var(--line); border-radius:3px; overflow:hidden;
    display:flex; flex-direction:column; background:var(--paper-2);
  }
  .service-photo{
    position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--steel-800);
  }
  .service-photo .icon-panel svg{ width:38%; height:38%; }
  .service-body{ padding:22px 20px 22px; }
  .pill{
    display:inline-block; background:var(--paper-2); border:1px solid var(--line);
    color:var(--steel-700); font-size:.76rem; font-weight:600; padding:4px 10px;
    border-radius:20px; margin-bottom:12px;
  }
  .portfolio{ background:var(--paper); border-top:1px solid var(--line); }

  /* ---------- CLIENTS MARQUEE ---------- */
  .clients-showcase{
    background:var(--steel-800); padding:52px 0; overflow:hidden;
  }
  .clients-showcase .section-head{ margin-bottom:24px; }
  .clients-showcase .section-head h2{ color:var(--white); }
  .clients-showcase .section-head p{ color:var(--steel-500); }
  .marquee-wrap{
    overflow:hidden; width:100%; margin-top:6px;
    -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
    mask-image:linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
  }
  .marquee-track{
    display:flex; gap:22px; width:max-content;
    animation:marquee-right 30s linear infinite;
  }
  .marquee-wrap:hover .marquee-track{ animation-play-state:paused; }
  @keyframes marquee-right{ from{ transform:translateX(-50%); } to{ transform:translateX(0%); } }
  .client-badge{
    display:flex; align-items:center; gap:16px; white-space:nowrap;
    background:var(--steel-700); border:1px solid var(--steel-600); border-radius:8px; padding:18px 28px;
    transition:background .18s ease, border-color .18s ease;
  }
  .client-badge:hover{ background:var(--amber); border-color:var(--amber); }
  .client-badge .mono-logo{
    width:60px; height:60px; border-radius:8px; flex:none;
    background:var(--steel-900); color:var(--amber-2);
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:.86rem; transition:background .18s ease, color .18s ease;
  }
  .client-badge .client-name{ font-weight:600; color:var(--paper); font-size:1.05rem; transition:color .18s ease; }
  .client-badge:hover .client-name{ color:var(--steel-900); }
  .service-icon{ width:44px; height:44px; color:var(--steel-700); margin-bottom:18px; }
  .service-cta{
    display:inline-block; margin-top:16px; font-size:.9rem; font-weight:600;
    color:var(--steel-900); border-bottom:1px solid var(--amber); padding-bottom:2px;
    transition:color .15s ease, border-color .15s ease;
  }
  .service-cta:hover{ color:var(--amber); }
  .service h3{ font-size:1.1rem; margin-bottom:10px; }
  .service p{ font-size:.96rem; margin-bottom:0; }

  /* ---------- SHOP ---------- */
  .shop{ background:var(--paper); border-top:1px solid var(--line); }
  .shop-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;
  }
  .product{
    border:1px solid var(--line); border-radius:3px; overflow:hidden;
    display:flex; flex-direction:column; background:var(--white);
  }
  .product-photo{ aspect-ratio:4/3; overflow:hidden; background:var(--steel-800); }
  .product-photo .icon-panel svg{ width:50%; height:50%; transition:transform .3s ease; }
  .product:hover .product-photo .icon-panel svg{ transform:scale(1.05); }
  .product-body{ padding:18px 18px 20px; display:flex; flex-direction:column; flex:1; }
  .product-body h3{ font-size:1rem; margin-bottom:6px; }
  .product-spec{ color:var(--steel-600); font-size:.85rem; margin-bottom:14px; }
  .product-spec .mono{ color:var(--steel-700); }
  .product-foot{
    margin-top:auto; display:flex; align-items:center; justify-content:space-between;
    padding-top:14px; border-top:1px solid var(--line);
  }
  .product-price{ font-size:.85rem; color:var(--steel-600); border-bottom:1px dashed var(--steel-600); }
  .product-price:hover{ color:var(--amber); border-color:var(--amber); }
  .product-link{
    font-size:.88rem; font-weight:600; color:var(--steel-900);
    border-bottom:1px solid var(--amber); padding-bottom:1px;
  }
  .product-link:hover{ color:var(--amber); }
  .shop-note{ color:var(--steel-600); font-size:.9rem; margin-top:28px; }

  /* ---------- ABOUT ---------- */
  .about{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .about-inner{
    max-width:var(--max); margin:0 auto; padding:0 28px;
    display:grid; grid-template-columns:3fr 2fr; gap:48px; align-items:start;
  }
  .about-text h2{ font-size:clamp(1.5rem, 2.4vw, 2rem); }
  .about-text p{ font-size:1.02rem; }

  /* ---------- MINI CONTACT FORM ---------- */
  .mini-form{
    background:var(--white); border:1px solid var(--line); border-radius:8px;
    padding:26px 24px; box-shadow:0 1px 2px rgba(20,24,29,.04);
  }
  .mini-form h3{ font-size:1.05rem; margin-bottom:4px; }
  .mini-form .mini-form-sub{ color:var(--steel-600); font-size:.88rem; margin-bottom:18px; }
  .mini-form label{ display:block; font-size:.86rem; color:var(--steel-700); font-weight:600; margin-bottom:6px; }
  .mini-form .field{ margin-bottom:14px; }
  .mini-form input, .mini-form textarea{
    width:100%; border:1px solid var(--line); border-radius:6px; padding:11px 13px;
    font-family:var(--sans); font-size:.94rem; color:var(--ink); background:var(--paper-2);
    transition:border-color .15s ease, background .15s ease;
  }
  .mini-form input:focus, .mini-form textarea:focus{
    outline:none; border-color:var(--amber); background:var(--white);
  }
  .mini-form textarea{ resize:vertical; min-height:70px; }
  .mini-form button{
    width:100%; border:none; cursor:pointer; background:var(--amber); color:var(--steel-900);
    font-family:var(--sans); font-weight:700; font-size:.96rem; padding:13px; border-radius:6px;
    transition:background .15s ease;
  }
  .mini-form button:hover{ background:var(--amber-2); }
  .mini-form .mini-form-note{ color:var(--steel-500); font-size:.78rem; margin:10px 0 0; text-align:center; }
  .mini-form .form-status{
    display:none; margin-top:14px; padding:11px 13px; border-radius:6px;
    font-size:.88rem; font-weight:600; text-align:center;
  }
  .mini-form .form-status.show{ display:block; }
  .mini-form .form-status.success{ background:#eaf4ee; color:var(--sync); }
  .mini-form .form-status.error{ background:#fbeaea; color:#c0392b; }
  .mini-form button[disabled]{ opacity:.6; cursor:not-allowed; }

  /* ---------- BRANDS ---------- */
  .brands{ background:var(--steel-900); padding:44px 0; }
  .brands-inner{
    max-width:var(--max); margin:0 auto; padding:0 28px;
    display:flex; align-items:center; gap:36px; flex-wrap:wrap;
    justify-content:space-between;
  }
  .brands-label{ color:var(--steel-500); font-size:.92rem; margin:0; white-space:nowrap; }
  .brand-list{ display:flex; gap:36px; flex-wrap:wrap; }
  .brand-list span{
    color:var(--paper); font-family:var(--mono); font-size:.95rem; letter-spacing:.02em;
  }

  /* ---------- CONTACT ---------- */
  .contact{ background:var(--steel-900); color:var(--paper); border-top:1px solid var(--steel-700); }
  .contact-inner{
    max-width:var(--max); margin:0 auto; padding:0 28px;
    display:grid; grid-template-columns:1.2fr .8fr; gap:56px; align-items:start;
  }
  .contact-text h2{ color:var(--white); font-size:clamp(1.5rem, 2.4vw, 2rem); }
  .contact-text > p{ color:var(--steel-500); font-size:1.02rem; max-width:44ch; }
  .contact-list{ list-style:none; margin:28px 0 0; padding:0; border-top:1px solid var(--steel-700); }
  .contact-list li{
    display:flex; justify-content:space-between; align-items:center; gap:16px;
    padding:16px 0; border-bottom:1px solid var(--steel-700);
  }
  .contact-list .label{ color:var(--steel-500); font-size:.9rem; }
  .contact-list a, .contact-list span.value{
    font-family:var(--mono); color:var(--paper); font-size:.98rem; direction:ltr; text-align:left;
  }
  .contact-list a:hover{ color:var(--amber-2); }
  .contact-cta{
    background:var(--steel-800); border:1px solid var(--steel-700); border-radius:4px;
    padding:32px; text-align:center;
  }
  .contact-cta p{ color:var(--steel-500); margin-bottom:20px; font-size:.94rem; }

  /* ---------- FOOTER ---------- */
  .site-footer{
    background:var(--steel-900); border-top:1px solid var(--steel-700);
    padding:22px 0; text-align:center;
  }
  .site-footer p{ color:var(--steel-600); font-size:.85rem; margin:0; }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:900px){
    .hero-inner{ grid-template-columns:1fr; padding-top:52px; }
    .hero-visual{ order:-1; }
    .hero h1{ max-width:none; }
    .about-inner{ grid-template-columns:1fr; }
    .contact-inner{ grid-template-columns:1fr; }
    .service-list{ grid-template-columns:repeat(2, 1fr); }
    .shop-grid{ grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width:520px){
    .service-list{ grid-template-columns:1fr; }
    .shop-grid{ grid-template-columns:1fr; }
  }
  @media (max-width:780px){
    .site-nav{
      position:fixed; inset:72px 0 auto 0; background:var(--steel-900);
      flex-direction:column; gap:0; padding:8px 28px 18px;
      border-bottom:1px solid var(--steel-700);
      transform:translateY(-8px); opacity:0; pointer-events:none;
      transition:opacity .15s ease, transform .15s ease;
    }
    .site-nav.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
    .site-nav a{ padding:14px 0; border-bottom:1px solid var(--steel-800); width:100%; }
    .menu-toggle{ display:block; }
    .nav-cta{ display:none; }
    section{ padding:56px 0; }
    .stats-inner{ justify-content:flex-start; }
    .marquee-wrap{
      overflow-x:auto; -webkit-overflow-scrolling:touch;
      -webkit-mask-image:none; mask-image:none;
      scroll-snap-type:x proximity; padding-bottom:6px;
    }
    .marquee-track{ animation:none; width:max-content; }
    .marquee-track .client-badge[aria-hidden="true"]{ display:none; }
    .client-badge{ scroll-snap-align:start; }
  }
  
  /* =========================================================
   Navigation Dropdowns
   ========================================================= */

.site-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-nav > a,
.nav-link-wrapper > a {
  text-decoration: none;
}


/* ---------- Dropdown Parent ---------- */

.nav-item {
  position: relative;
}

.nav-link-wrapper {
  display: flex;
  align-items: center;
  gap: 2px;
}


/* ---------- Dropdown Toggle ---------- */

.dropdown-toggle,
.submenu-toggle {
  border: 0;
  background: transparent;
  padding: 5px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}


/* ---------- Main Dropdown ---------- */

.dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;

  min-width: 270px;

  background: #fff;

  border-radius: 12px;

  padding: 8px;

  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.12);

  border: 1px solid rgba(0, 0, 0, 0.06);

  opacity: 0;
  visibility: hidden;

  transform: translateY(8px);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;

  z-index: 1000;
}


/* Desktop hover */

@media (min-width: 769px) {

  .has-dropdown:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

}


/* ---------- Dropdown Links ---------- */

.dropdown-menu > a,
.dropdown-group > .submenu-link-wrapper > a,
.submenu > a {

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  padding: 10px 12px;

  border-radius: 8px;

  color: inherit;

  text-decoration: none;

  font-size: 14px;

  line-height: 1.7;

  transition:
    background-color 0.2s ease,
    padding-right 0.2s ease;
}


.dropdown-menu > a:hover,
.dropdown-group > .submenu-link-wrapper > a:hover,
.submenu > a:hover {

  background: rgba(0, 0, 0, 0.05);

  padding-right: 16px;
}


/* ---------- Nested Submenu ---------- */

.dropdown-group {
  position: relative;
}


.submenu-link-wrapper {
  display: flex;
  align-items: center;
}


.submenu-link-wrapper > a {
  flex: 1;
}


.submenu-toggle {
  flex-shrink: 0;
}


.submenu {
  position: absolute;

  top: -8px;

  right: calc(100% + 8px);

  min-width: 280px;

  background: #fff;

  border-radius: 12px;

  padding: 8px;

  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.12);

  border: 1px solid rgba(0, 0, 0, 0.06);

  opacity: 0;

  visibility: hidden;

  transform: translateX(8px);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;

  z-index: 1001;
}


@media (min-width: 769px) {

  .has-submenu:hover > .submenu-link-wrapper + .submenu,
  .has-submenu:hover > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }

}


/* ---------- Third Level ---------- */

.submenu-group {
  position: relative;
}


.submenu-group > .submenu {
  right: calc(100% + 8px);
}


/* =========================================================
   Mobile Navigation
   ========================================================= */

@media (max-width: 768px) {

  .site-nav {
    display: none;

    position: absolute;

    top: 100%;

    right: 0;
    left: 0;

    flex-direction: column;

    align-items: stretch;

    gap: 0;

    padding: 12px;

    background: #fff;

    box-shadow:
      0 15px 30px rgba(0, 0, 0, 0.1);

    max-height: calc(100vh - 80px);

    overflow-y: auto;

    z-index: 999;
  }


  .site-nav.open {
    display: flex;
  }


  .site-nav > a,
  .nav-link-wrapper > a {

    padding: 12px;

    display: block;

    width: 100%;
  }


  .nav-item {
    width: 100%;
  }


  .nav-link-wrapper {
    width: 100%;

    justify-content: space-between;
  }


  .dropdown-toggle,
  .submenu-toggle {
    padding: 10px 14px;
  }


  /* Main dropdown on mobile */

  .dropdown-menu {

    position: static;

    display: none;

    min-width: 0;

    width: 100%;

    padding: 4px 8px;

    margin-top: 2px;

    border: 0;

    border-radius: 8px;

    box-shadow: none;

    opacity: 1;

    visibility: visible;

    transform: none;

    background: rgba(0, 0, 0, 0.025);
  }


  .has-dropdown.open > .dropdown-menu {
    display: block;
  }


  /* Nested submenu */

  .submenu {

    position: static;

    display: none;

    min-width: 0;

    width: 100%;

    padding: 4px 8px;

    margin-top: 2px;

    border: 0;

    border-radius: 8px;

    box-shadow: none;

    opacity: 1;

    visibility: visible;

    transform: none;

    background: rgba(0, 0, 0, 0.025);
  }


  .has-submenu.open > .submenu {
    display: block;
  }


  .dropdown-menu > a,
  .dropdown-group > .submenu-link-wrapper > a,
  .submenu > a {

    padding: 10px;

    font-size: 13px;
  }


  .header-actions {
    margin-right: auto;
  }

}

/* =========================================================
   Dropdown Text Visibility Fix
   ========================================================= */

.site-nav .dropdown-menu,
.site-nav .submenu {
  color: #222;
}

.site-nav .dropdown-menu a,
.site-nav .dropdown-menu a:visited,
.site-nav .submenu a,
.site-nav .submenu a:visited {
  color: #222;
  text-decoration: none;
}

.site-nav .dropdown-menu a:hover,
.site-nav .submenu a:hover {
  color: #111;
  background: rgba(0, 0, 0, 0.06);
}


/* متن گزینه‌هایی که دارای زیرمنو هستند */

.site-nav .submenu-link-wrapper > a,
.site-nav .submenu-link-wrapper > a:visited {
  color: #222;
}


/* فلش‌های Dropdown */

.site-nav .dropdown-toggle,
.site-nav .submenu-toggle {
  color: #222;
}


/* جلوگیری از سفید شدن متن در حالت‌های مختلف */

.site-nav .dropdown-menu *,
.site-nav .submenu * {
  color: inherit;
}

/* فاصله مناسب لینک‌های ساده منو */

.site-nav > a {
  padding: 10px 14px;
}

.site-nav > a + a {
  margin-right: 6px;
}

/* =========================================================
   Internal Pages
   ========================================================= */

.container {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}


/* ---------- Page Hero ---------- */

.page-hero {
  padding: 100px 0 70px;
  text-align: center;
}


.page-hero .section-eyebrow,
.section-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
}


.page-hero h1 {
  margin: 0 0 20px;
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.35;
}


.page-hero p {
  max-width: 720px;
  margin: 0 auto;
  line-height: 2;
}


/* ---------- Section Heading ---------- */

.section-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 50px;
}


.section-heading h2 {
  margin: 0 0 16px;
  font-size: clamp(26px, 4vw, 38px);
}


.section-heading p {
  line-height: 2;
}


/* ---------- Portfolio ---------- */

.portfolio-page {
  padding: 70px 0 100px;
}


.portfolio-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 28px;
}


.portfolio-card {
  overflow: hidden;

  border-radius: 18px;

  background: #fff;

  border: 1px solid rgba(0, 0, 0, 0.07);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}


.portfolio-card:hover {
  transform: translateY(-5px);

  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.1);
}


.portfolio-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}


.portfolio-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  display: block;

  transition:
    transform 0.35s ease;
}


.portfolio-card:hover .portfolio-image img {
  transform: scale(1.04);
}


.portfolio-content {
  padding: 24px;
}


.portfolio-category {
  font-size: 13px;
  font-weight: 700;
}


.portfolio-content h3 {
  margin: 8px 0 12px;
  font-size: 20px;
}


.portfolio-content p {
  margin: 0;
  line-height: 2;
  font-size: 14px;
}


/* ---------- Page CTA ---------- */

.page-cta {
  padding: 80px 20px;

  text-align: center;
}


.page-cta h2 {
  margin: 0 0 16px;
  font-size: clamp(26px, 4vw, 38px);
}


.page-cta p {
  max-width: 650px;
  margin: 0 auto 28px;
  line-height: 2;
}


.page-cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 13px 25px;

  border-radius: 10px;

  text-decoration: none;
}


/* ---------- Contact Page ---------- */

.contact-page {
  padding: 70px 0 100px;
}


.contact-page-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 0.8fr)
    minmax(0, 1.2fr);

  gap: 60px;

  align-items: start;
}


.contact-info h2 {
  margin: 0 0 18px;
  font-size: clamp(28px, 4vw, 40px);
}


.contact-info > p {
  line-height: 2;
  margin-bottom: 35px;
}


.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}


.contact-info-item {
  display: flex;
  align-items: center;
  gap: 14px;

  padding: 16px;

  border-radius: 12px;

  text-decoration: none;

  border: 1px solid rgba(0, 0, 0, 0.07);
}


.contact-info-item > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
}


.contact-info-item strong {
  font-size: 15px;
}


.contact-info-item small {
  font-size: 13px;
}


.contact-info-icon {
  width: 42px;
  height: 42px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  font-size: 18px;
}


/* ---------- Contact Form ---------- */

.contact-form-wrapper {
  padding: 32px;

  border-radius: 20px;

  border: 1px solid rgba(0, 0, 0, 0.07);

  background: #fff;
}


.contact-form-header {
  margin-bottom: 28px;
}


.contact-form-header h2 {
  margin: 0 0 12px;
}


.contact-form-header p {
  margin: 0;
  line-height: 1.9;
  font-size: 14px;
}


#contactForm {
  display: flex;
  flex-direction: column;
  gap: 18px;
}


.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}


.form-group label {
  font-size: 14px;
  font-weight: 600;
}


.form-group input,
.form-group textarea {
  width: 100%;

  box-sizing: border-box;

  padding: 13px 14px;

  border: 1px solid rgba(0, 0, 0, 0.15);

  border-radius: 10px;

  font-family: inherit;

  font-size: 14px;

  outline: none;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


.form-group input:focus,
.form-group textarea:focus {
  border-color: currentColor;

  box-shadow:
    0 0 0 3px rgba(0, 0, 0, 0.05);
}


.form-group textarea {
  resize: vertical;
}


#mf-submit {
  width: 100%;

  padding: 14px 20px;

  border: 0;

  border-radius: 10px;

  font-family: inherit;

  font-size: 15px;

  font-weight: 700;

  cursor: pointer;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}


#mf-submit:hover {
  opacity: 0.9;
}


#mf-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


.form-status {
  display: none;

  padding: 12px;

  border-radius: 8px;

  font-size: 14px;

  line-height: 1.8;
}


.form-status.show {
  display: block;
}


.form-status.success {
  background: #eaf7ed;
}


.form-status.error {
  background: #fdecec;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 768px) {

  .container {
    width: min(100% - 28px, 1180px);
  }


  .page-hero {
    padding: 70px 0 45px;
  }


  .portfolio-page,
  .contact-page {
    padding: 50px 0 70px;
  }


  .portfolio-grid {
    grid-template-columns: 1fr;
  }


  .contact-page-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }


  .contact-form-wrapper {
    padding: 22px;
  }


  .page-cta {
    padding: 60px 20px;
  }

}

/* =========================================================
   Footer
   ========================================================= */

.site-footer {
  margin-top: 80px;
  background: #151c24;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}





/* ---------- Contact List ---------- */

.footer-contact-list {
  display: flex;
  flex-direction: column;
}


.footer-contact-item {
  display: grid;

  grid-template-columns: 110px 1fr;

  align-items: center;

  gap: 20px;

  padding: 17px 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.12);

  text-decoration: none;

  color: #fff;
}


.footer-contact-label {
  color: #7188a2;

  font-size: 13px;
}


.footer-contact-value {
  color: #fff;

  font-size: 14px;

  font-weight: 500;

  line-height: 1.8;
}


a.footer-contact-item:hover .footer-contact-value {
  color: #f5bd00;
}


/* ---------- CTA ---------- */

.footer-cta {
  display: flex;

  justify-content: center;
}


.footer-cta-box {
  width: 100%;

  max-width: 430px;

  padding: 38px 30px;

  box-sizing: border-box;

  text-align: center;

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 5px;

  background: #202b37;
}


.footer-cta-box p {
  margin: 0 0 24px;

  color: #7188a2;

  font-size: 15px;
}


.footer-cta-button {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 210px;

  padding: 14px 24px;

  box-sizing: border-box;

  border-radius: 4px;

  background: #f5bd00;

  color: #111;

  text-decoration: none;

  font-size: 14px;

  font-weight: 700;

  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}


.footer-cta-button:hover {
  opacity: 0.9;

  transform: translateY(-2px);
}


/* ---------- Bottom ---------- */

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);

  text-align: center;

  padding: 22px 20px;
}


.footer-bottom p {
  margin: 0;

  color: #5f748b;

  font-size: 12px;

  line-height: 1.8;
}


/* =========================================================
   Footer Responsive
   ========================================================= */

@media (max-width: 768px) {

  .site-footer {
    margin-top: 50px;
  }


  .footer-inner {
    width: min(100% - 28px, 1140px);

    padding: 55px 0;

    grid-template-columns: 1fr;

    gap: 40px;
  }


  .footer-heading h2 {
    font-size: 27px;
  }


  .footer-cta {
    justify-content: stretch;
  }


  .footer-cta-box {
    max-width: none;
  }


  .footer-contact-item {
    grid-template-columns: 90px 1fr;

    gap: 12px;

    padding: 15px 0;
  }


  .footer-contact-label {
    font-size: 12px;
  }


  .footer-contact-value {
    font-size: 13px;
  }

}

/* ---------- CTA BOX (سؤالی درباره پروژه‌تان دارید؟) ---------- */

.cta-box{
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-2) 100%);
  border-radius: 16px;
  padding: 52px 32px;
  text-align: center;
  margin: 48px 0 64px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px -14px rgba(240, 185, 13, .4);
}

.cta-box::before{
  content: "";
  position: absolute;
  top: -60px;
  left: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
}

.cta-box::after{
  content: "";
  position: absolute;
  bottom: -80px;
  right: -80px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
}

.cta-icon{
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
}

.cta-icon svg{
  width: 28px;
  height: 28px;
  color: var(--steel-900);
  text-align: center;
}

.cta-box h2{
  position: relative;
  z-index: 1;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  color: var(--steel-900);
  margin-bottom: 10px;
  font-weight: 700;
}

.cta-box p{
  position: relative;
  z-index: 1;
  color: var(--steel-800);
  margin-bottom: 30px;
  font-size: 1rem;
  text-align: center;
}

.btn-cta{
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--steel-900);
  color: var(--white);
  padding: 16px 34px;
  border-radius: 50px;
  font-weight: 700;
  font-size: .98rem;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(24, 31, 39, .28);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.btn-cta svg{
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn-cta:hover{
  background: var(--steel-800);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(24, 31, 39, .35);
}

@media (max-width: 640px){
  .cta-box{ padding: 40px 20px; }
  .btn-cta{ padding: 14px 26px; font-size: .92rem; }
}






/* =========================================================
   استایل‌های صفحه «درباره ما» و صفحات داخلی مشابه
   (این بخش را به‌جای پیشنهاد کوچک قبلی page-hero استفاده کن)
   ========================================================= */

/* ---------- PAGE HERO ---------- */
.page-hero{
  background:var(--steel-900); color:var(--paper); padding:56px 0 64px;
}
.page-hero h1{
  color:var(--white); font-size:clamp(1.7rem, 3vw, 2.4rem); max-width:18ch;
}
.page-hero p{
  color:var(--steel-500); font-size:1.05rem; max-width:52ch; margin:0;
}

/* ---------- محتوای اصلی صفحات داخلی ---------- */
main{ padding:64px 0 20px; }

.intro-grid{ display:grid; grid-template-columns:2fr 1fr; gap:40px; align-items:start; }


.quick-facts{ border:1px solid var(--line); border-radius:8px; padding:22px 24px; background:var(--paper-2); }
.quick-facts h3{ font-size:.92rem; color:var(--steel-600); margin-bottom:4px; font-weight:600; }
.qf-item{ padding:14px 0; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:2px; }
.qf-item:first-of-type{ padding-top:10px; }
.qf-item:last-child{ border-bottom:none; }
.qf-num{ font-family:var(--mono); color:var(--steel-900); font-size:1.3rem; font-weight:700; direction:ltr; }
.qf-label{ color:var(--steel-600); font-size:.84rem; }

.value-list{ list-style:none; margin:24px 0 40px; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.value-list li{ border:1px solid var(--line); border-radius:4px; padding:20px; }
.value-list h3{ font-size:1rem; margin-bottom:6px; }
.value-list p{ font-size:.94rem; margin:0; }

.section-block{ margin:56px 0; }
.section-block h2{ font-size:1.35rem; margin-bottom:6px; }
.section-block .lead{ color:var(--steel-600); font-size:.96rem; max-width:60ch; margin-bottom:28px; }

/* ---------- تیم ---------- */
.team-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:20px; }
.team-card{ border:1px solid var(--line); border-radius:8px; padding:20px 16px; text-align:center; }
.avatar{
  width:64px; height:64px; border-radius:50%; margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center;
  color:var(--steel-900); font-weight:700; font-size:1.1rem; background:var(--amber);
}
.team-card h3{ font-size:.96rem; margin-bottom:4px; }
.team-role{ color:var(--steel-600); font-size:.82rem; margin-bottom:8px; min-height:2.4em; }
.team-tenure{ color:var(--steel-500); font-size:.78rem; margin-bottom:10px; }
.social-tags{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.social-icon{
  width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--paper-2); border:1px solid var(--line); color:var(--steel-700);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.social-icon svg{ width:15px; height:15px; }
.social-icon:hover{ background:var(--amber); color:var(--steel-900); border-color:var(--amber); }

/* ---------- گالری کارگاه ---------- */
.workshop-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.workshop-tile{
  aspect-ratio:4/3; border-radius:8px; background:var(--steel-800);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--steel-500); gap:10px; position:relative; overflow:hidden;
}
.workshop-tile svg{ width:34px; height:34px; color:var(--amber-2); }
.workshop-tile span{ font-size:.85rem; color:var(--paper); font-weight:600; padding:0 12px; text-align:center; }
.workshop-note{ color:var(--steel-500); font-size:.85rem; margin-top:16px; }

/* ---------- کادر CTA + دکمه تیره (برای روی زمینه زرد) ---------- */
.cta-box{ background:var(--amber); border-radius:4px; padding:32px; text-align:center; margin:40px 0 60px; }
.cta-box h2{ font-size:1.3rem; margin-bottom:10px; }
.cta-box p{ color:var(--steel-800); margin-bottom:20px; }

.btn-dark{ background:var(--steel-900); color:var(--white); }
.btn-dark:hover{ background:var(--steel-800); }

/* ---------- ریسپانسیو صفحات داخلی ---------- */
@media (max-width:980px){ .team-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .intro-grid{ grid-template-columns:1fr; } }
@media (max-width:640px){
  .value-list{ grid-template-columns:1fr; }
  .team-grid{ grid-template-columns:repeat(2,1fr); }
  .workshop-grid{ grid-template-columns:1fr 1fr; }
}

/* =========================================================
   صفحات داخلی خدمات (Service Detail Pages)
   برای استفاده در همه‌ی صفحات زیرمجموعه‌ی /services/*
   ========================================================= */

/* ---------- Breadcrumb ---------- */
.service-breadcrumb{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  color:var(--steel-500); font-size:.85rem; margin-bottom:20px;
}
.service-breadcrumb a{ color:var(--steel-500); transition:color .15s ease; }
.service-breadcrumb a:hover{ color:var(--amber-2); }
.service-breadcrumb .sep{ color:var(--steel-700); }
.service-breadcrumb .current{ color:var(--paper); }

/* ---------- Above the Fold: Hero + Slideshow ---------- */
.service-hero{ background:var(--steel-900); color:var(--paper); overflow:hidden; }
.service-hero-inner{
  max-width:var(--max); margin:0 auto; padding:52px 28px 60px;
  display:grid; grid-template-columns:.78fr 1.22fr; gap:44px; align-items:center;
}
.service-hero-text .eyebrow{
  display:inline-block; color:var(--amber-2); font-weight:600; font-size:.92rem; margin:0 0 16px;
}
.service-hero-text h1{
  color:var(--white); font-size:clamp(1.65rem, 2.8vw, 2.35rem); max-width:16ch; margin-bottom:16px;
}
.service-hero-text .lead{
  color:var(--steel-500); font-size:1.02rem; max-width:46ch; margin-bottom:28px;
}
.service-hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* Slider */
.hero-slider{
  position:relative; border-radius:8px; overflow:hidden; aspect-ratio:1/1;
  min-height:340px; border:1px solid var(--steel-700); background:var(--steel-800);
}
@media (min-width:861px){
  .hero-slider{ min-height:480px; }
}
.hero-slider .slide{
  position:absolute; inset:0; opacity:0; z-index:0;
  transition:opacity .9s ease;
}
.hero-slider .slide.active{ opacity:1; z-index:1; }
.hero-slider .slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-slider::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(20,24,29,.85) 0%, rgba(20,24,29,0) 48%);
}
.hero-slider .slide-caption{
  position:absolute; right:16px; bottom:18px; left:16px; z-index:2;
  color:var(--paper); font-size:.88rem; font-weight:600;
}
.hero-slider-dots{
  position:absolute; z-index:3; bottom:16px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px;
}
.hero-slider-dots button{
  width:7px; height:7px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:rgba(255,255,255,.4); transition:width .2s ease, background .2s ease;
}
.hero-slider-dots button.active{ background:var(--amber); width:18px; border-radius:4px; }

/* ---------- Overview + Video ---------- */
.service-overview{ background:var(--paper); border-top:1px solid var(--line); }
.service-overview-inner{
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:start;
}
.service-overview-text h2{ font-size:clamp(1.4rem, 2.2vw, 1.8rem); margin-bottom:16px; }
.service-overview-text p{ font-size:1rem; }

.service-video{
  position:relative; border-radius:8px; overflow:hidden; aspect-ratio:16/9;
  background:var(--steel-800); border:1px solid var(--line);
}
.service-video video{ width:100%; height:100%; object-fit:cover; display:block; }

.supply-note{
  display:flex; gap:10px; align-items:flex-start;
  background:#fff8e6; border:1px solid var(--amber); border-radius:6px;
  padding:12px 14px; font-size:.87rem; color:var(--steel-700); margin-top:16px;
}
.supply-note svg{ width:18px; height:18px; flex:none; color:var(--amber); margin-top:2px; }

/* ---------- Process Steps (Zig-Zag) ---------- */
.process-section{ background:var(--paper-2); border-top:1px solid var(--line); }
.process-list{ display:flex; flex-direction:column; gap:20px; margin-top:8px; }
.process-item{
  display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:center;
  padding-bottom:64px; margin-bottom:44px;
  border-bottom:1px solid var(--line);
}
.process-item:last-child{
  padding-bottom:0; margin-bottom:0; border-bottom:none;
}
.process-item:nth-child(even) .process-media{ order:2; }
.process-item:nth-child(even) .process-text{ order:1; }

.process-media{
  position:relative; border-radius:8px; overflow:hidden;
  background:var(--steel-800); border:1px solid var(--line);
  height:0;
  padding-bottom:75%; /* نسبت 4:3 = 3/4 = 75% */
}
@supports (aspect-ratio: 4 / 3){
  .process-media{
    height:auto;
    padding-bottom:0;
    aspect-ratio:4/3;
  }
}
.process-media img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;object-fit: fill;
}
.process-num{
  position:absolute; top:14px; right:14px; z-index:2;
  width:38px; height:38px; border-radius:50%; background:var(--amber); color:var(--steel-900);
  font-weight:700; font-family:var(--mono); font-size:1rem;
  display:flex; align-items:center; justify-content:center;
}
.process-text h3{ font-size:1.25rem; margin-bottom:16px; line-height:1.5; }
.process-text p{ font-size:1rem; line-height:1.9; margin-bottom:14px; color:var(--steel-700); }
.process-text p:last-of-type{ margin-bottom:24px; }
.process-actions{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.btn-sm{ padding:10px 20px; font-size:.85rem; }

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .service-hero-inner{ grid-template-columns:1fr; padding-top:44px; }
  .service-hero-visual{ order:-1; }
  .service-hero-text h1{ max-width:none; }
  .service-overview-inner{ grid-template-columns:1fr; }
  .process-item,
  .process-item:nth-child(even){ grid-template-columns:1fr; }
  .process-item:nth-child(even) .process-media,
  .process-item:nth-child(even) .process-text{ order:0; }
}

@media (max-width:860px){
  .service-hero-inner{ grid-template-columns:1fr; padding-top:44px; }
  .service-hero-visual{ order:-1; }
  .service-hero-text h1{ max-width:none; }
  .service-overview-inner{ grid-template-columns:1fr; }
  .process-item,
  .process-item:nth-child(even){ grid-template-columns:1fr; }
  .process-item:nth-child(even) .process-media,
  .process-item:nth-child(even) .process-text{ order:0; }

  /* اضافه شد: نمایش بردکرامب به‌صورت نوار بالا در موبایل */
  .service-hero-inner{
    position: relative;
    padding-top: 78px;
  }
  .service-breadcrumb{
    position: absolute;
    top: 18px;
    right: 28px;
    left: 28px;
    margin-bottom: 0;
    z-index: 5;
  }
}

/* ---------- BRAND COVERAGE ---------- */
.brand-coverage{ background:var(--paper-2); border-top:1px solid var(--line); }
.brand-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
}
.brand-card{
  border:1px solid var(--line); border-radius:8px; padding:26px 22px;
  background:var(--white);
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.brand-card:hover{
  border-color:var(--amber); transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(20,24,29,.07);
}
.brand-icon{
  width:48px; height:48px; border-radius:50%;
  background:var(--steel-900); color:var(--amber-2);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:700; font-size:.8rem;
  margin-bottom:16px; direction:ltr;
}
.brand-card h3{ font-size:1.02rem; margin-bottom:8px; line-height:1.5; }
.brand-card p{ font-size:.9rem; margin-bottom:16px; }

@media (max-width:900px){
  .brand-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:560px){
  .brand-grid{ grid-template-columns:1fr; }
}
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .shop-categories {
    padding: 32px 0 8px;
  }

  .shop-categories-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-size: 1.05rem;
    font-weight: 700;
  }

  .shop-categories-title::before {
    content: "";
    width: 4px;
    height: 20px;
    border-radius: 2px;
    background: var(--amber, #f5a623);
  }

  .cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  @media (min-width: 640px) {
    .cat-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (min-width: 992px) {
    .cat-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
  }

  .cat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }

  .cat-card:hover,
  .cat-card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--amber, #f5a623);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .10);
  }

  .cat-thumb {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #eef1f4, #dde3e9);
  }

  .cat-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
  }

  .cat-card:hover .cat-thumb img {
    transform: scale(1.08);
  }

  .cat-name {
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.6;
  }

  @media (max-width: 480px) {
    .cat-card {
      flex-direction: column;
      text-align: center;
      gap: 10px;
      padding: 14px 8px;
    }

    .cat-thumb {
      flex-basis: auto;
      width: 72px;
      height: 72px;
    }

    .cat-name {
      font-size: .88rem;
    }
  }

  main > .container {
    width: min(1560px, 100% - 64px);
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
  }

  @media (max-width: 640px) {
    main > .container {
      width: calc(100% - 24px);
    }
  }

  main .shop-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }

  @media (max-width: 900px) {
    main .shop-layout {
      grid-template-columns: 1fr;
    }
  }

  main .shop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  @media (max-width: 700px) {
    main .shop-grid {
      grid-template-columns: 1fr;
    }
  }

  main .product .mini-spec {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }

  @media (max-width: 480px) {
    main .product .mini-spec {
      grid-template-columns: 1fr;
    }
  }

  main .product {
    overflow: hidden;
  }

  main .product .product-top {
    display: block;
    position: relative;
    padding: 0;
    margin: 0;
  }

main .product .product-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 6 / 3;
  flex: none;
  margin: 0;
  border-radius: 0;
  background: #f4f6f8;
  overflow: hidden;
}

main .product .product-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform .4s ease;
}

  main .product:hover .product-photo img {
    transform: scale(1.04);
  }

  main .product .product-photo svg {
    width: 100%;
    height: 100%;
    padding: 14%;
    box-sizing: border-box;
    color: #333f4c;
  }

  main .product .product-heading {
    position: static;
    padding: 12px 18px 4px;
    margin: 0;
    gap: 0;
  }

  main .product .product-heading h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.5;
  }

  main .product .product-tag-mini {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    z-index: 2;
    margin: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  }
  /* ===== فیلتر موبایل ===== */
.filter-toggle,
.filter-overlay,
.sidebar-head,
.sidebar-apply {
  display: none;
}

@media (max-width: 900px) {

  .filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 12px;
    padding: 12px 16px;
    font: inherit;
    font-weight: 700;
    color: #1a1a1a;
    background: #fff;
    border: 1.5px solid var(--amber, #f5a623);
    border-radius: 12px;
    cursor: pointer;
  }

  .filter-toggle svg {
    width: 20px;
    height: 20px;
  }

  .filter-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
  }

  .filter-overlay.show {
    opacity: 1;
    visibility: visible;
  }

  aside.sidebar {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto !important;
    z-index: 1001;
    max-height: 85vh;
    overflow-y: auto;
    padding: 0 18px 16px;
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .2);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform .3s ease, visibility .3s ease;
  }

  aside.sidebar.open {
    transform: translateY(0);
    visibility: visible;
  }

  .sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 16px 0 12px;
    margin-bottom: 8px;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    font-size: 1.05rem;
  }

  .sidebar-close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #f1f3f5;
    font-size: 1rem;
    cursor: pointer;
  }

  .sidebar-apply {
    display: block;
    position: sticky;
    bottom: 0;
    width: 100%;
    margin-top: 12px;
    padding: 14px;
    font: inherit;
    font-weight: 700;
    color: #1a1a1a;
    background: var(--amber, #f5a623);
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 -8px 12px #fff;
  }

  body.filters-open {
    overflow: hidden;
  }
}
main .product .product-photo {
  background: #fff;
}

@media (max-width: 700px) {
  main .product .product-photo {
    aspect-ratio: 4 / 3;
  }
}

/* =========================================================
   LIGHT THEME OVERRIDES  (انتهای فایل بذار)
   ========================================================= */
:root{
  --lt-1:#f1f3f6;      /* هدر، هیرو، فوتر */
  --lt-2:#e7ebf0;      /* آمار، مشتریان، برندها */
  --lt-3:#dde3ea;      /* پنل آیکون و عکس‌ها */
  --lt-line:#d5dbe3;
  --lt-text:#1f2933;
  --lt-soft:#52606d;
  --lt-amber-text:#a87c00;  /* زرد تیره‌تر برای متن روی زمینه روشن */
}

/* ---------- هدر ---------- */
.site-header{ background:var(--lt-1); border-bottom:1px solid var(--lt-line); }
.logo-text{ color:var(--lt-text); }
.site-nav a{ color:var(--lt-soft); }
.site-nav a:hover{ color:var(--lt-text); }
.menu-toggle{ border-color:var(--lt-line); color:var(--lt-text); }
.menu-toggle span{ background:var(--lt-text); }
@media (max-width:780px){
  .site-nav{ background:var(--lt-1); border-bottom-color:var(--lt-line); }
  .site-nav a{ border-bottom-color:var(--lt-line); }
}

/* ---------- هیرو ---------- */
.hero{ background:linear-gradient(180deg,#f4f6f9 0%,#e7ebf0 100%); color:var(--lt-text); }
.hero h1{ color:var(--lt-text); }
.hero-label{ color:var(--lt-amber-text); }
.hero-sub{ color:var(--lt-soft); }
.btn-ghost{ border-color:#b6bfcb; color:var(--lt-text); }
.btn-ghost:hover{ border-color:var(--lt-text); }

/* ---------- ۴ کارت تصویری هیرو ---------- */
.project-card{ background:var(--lt-3); border-color:var(--lt-line); }
.project-card::after{
  background:linear-gradient(to top, rgba(231,235,240,.95) 0%, rgba(231,235,240,0) 60%);
}
.project-card span{ color:var(--lt-text); }

/* ---------- پنل آیکون‌ها (هیرو، خدمات، محصولات) ---------- */
.icon-panel{ color:var(--steel-600); }
.service-photo,
.product-photo{ background:var(--lt-3); }
/* SVGهای هیرو رنگ کرم ثابت (#e6e3da) داشتن که روی روشن دیده نمیشه */
.icon-panel svg [stroke="#e6e3da"]{ stroke:var(--steel-600); }
.icon-panel svg [fill="#333f4c"]{ fill:#9aa5b3; }

/* ---------- نوار آمار ---------- */
.stats{ background:var(--lt-2); border-color:var(--lt-line); }
.stat-num{ color:var(--lt-amber-text); }
.stat-label{ color:var(--lt-soft); }

/* ---------- مشتریان ما ---------- */
.clients-showcase{ background:var(--lt-2); }
.clients-showcase .section-head h2{ color:var(--lt-text); }
.clients-showcase .section-head p{ color:var(--lt-soft); }
.client-badge{ background:#fff; border-color:var(--lt-line); }
.client-badge .mono-logo{ background:var(--lt-3); color:var(--lt-amber-text); }
.client-badge .client-name{ color:var(--lt-text); }
/* هاور زرد و متن تیره از قبل درسته و دست نمی‌خوره */

/* ---------- برندها ---------- */
.brands{ background:var(--lt-2); }
.brands-label{ color:var(--lt-soft); }
.brand-list span{ color:var(--lt-text); }

/* ---------- تماس (اگه استفاده میشه) ---------- */
.contact{ background:var(--lt-2); color:var(--lt-text); border-top-color:var(--lt-line); }
.contact-text h2{ color:var(--lt-text); }
.contact-text > p,
.contact-list .label,
.contact-cta p{ color:var(--lt-soft); }
.contact-list{ border-top-color:var(--lt-line); }
.contact-list li{ border-bottom-color:var(--lt-line); }
.contact-list a,
.contact-list span.value{ color:var(--lt-text); }
.contact-cta{ background:#fff; border-color:var(--lt-line); }

/* ---------- فوتر (این دوتا تو فایل رنگ ثابت دارن) ---------- */
.site-footer{ background:var(--lt-1); color:var(--lt-text); border-top:1px solid var(--lt-line); }
.footer-heading .section-eyebrow{ color:var(--lt-amber-text); }
.footer-heading h2{ color:var(--lt-text); }
.footer-heading p,
.footer-contact-label{ color:var(--lt-soft); }
.footer-contact-item{ color:var(--lt-text); border-bottom-color:var(--lt-line); }
.footer-contact-value{ color:var(--lt-text); }
a.footer-contact-item:hover .footer-contact-value{ color:var(--lt-amber-text); }
.footer-cta-box{ background:#fff; border-color:var(--lt-line); }
.footer-cta-box p{ color:var(--lt-soft); }
.footer-bottom{ border-top-color:var(--lt-line); }
.footer-bottom p{ color:var(--lt-soft); }

/* ---------- صفحات داخلی ---------- */
.page-hero,
.service-hero{ background:var(--lt-1); color:var(--lt-text); }
.page-hero h1,
.service-hero-text h1{ color:var(--lt-text); }
.page-hero p,
.service-hero-text .lead{ color:var(--lt-soft); }
.service-hero-text .eyebrow{ color:var(--lt-amber-text); }
.service-breadcrumb,
.service-breadcrumb a{ color:var(--lt-soft); }
.service-breadcrumb .sep{ color:#9aa5b3; }
.service-breadcrumb .current{ color:var(--lt-text); }
.service-breadcrumb a:hover{ color:var(--lt-amber-text); }
.workshop-tile{ background:var(--lt-3); }
.workshop-tile span{ color:var(--lt-text); }
.workshop-tile svg{ color:var(--lt-amber-text); }

/* ===== رنگ آیکون‌های SVG (جایگزین رنگ‌های ثابت داخل HTML) ===== */
.ic-main{ stroke:var(--steel-600); }
.ic-soft{ stroke:#8896a6; }
.ic-accent-stroke{ stroke:var(--amber); }
.ic-accent-fill{ fill:var(--amber); }
.ic-base-fill{ fill:#9aa5b3; }

/* ===== جایگزین استایل‌های inline ===== */
.product-photo .product-img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.mini-form .hidden{ display:none; }

/* ===== اسلایدر محصولات صفحه اصلی ===== */
.shop-slider-actions{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.slider-arrows{ display:flex; gap:8px; }
.slider-btn{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line); background:#fff; color:var(--steel-900);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, opacity .15s ease;
}
.slider-btn svg{ width:20px; height:20px; }
.slider-btn:hover:not([disabled]){ background:var(--amber); border-color:var(--amber); }
.slider-btn[disabled]{ opacity:.35; cursor:not-allowed; }

.shop-track{
  display:flex; gap:20px; overflow-x:auto;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:4px 2px 18px;
  scrollbar-width:thin;
}
.shop-track > .product{
  flex:0 0 calc((100% - 60px) / 4);
  min-width:0;
  scroll-snap-align:start;
}
.shop-track .product-photo{
  display:block; background:#fff; aspect-ratio:4/3; overflow:hidden;
}
.shop-track .product-photo .product-img{
  width:100%; height:100%; object-fit:contain; display:block;
}
.shop-track .product-body .pill{ align-self:flex-start; }
.shop-track .product-body h3 a:hover{ color:var(--amber); }

@media (max-width:1024px){
  .shop-track > .product{ flex-basis:calc((100% - 40px) / 3); }
}
@media (max-width:760px){
  .shop-track > .product{ flex-basis:calc((100% - 20px) / 2); }
  .slider-arrows{ display:none; } /* در موبایل با سوایپ */
}
@media (max-width:520px){
  .shop-track > .product{ flex-basis:82%; }
}

/* ===== درگ با موس ===== */
.shop-track{ cursor:grab; }
.shop-track.is-dragging{
  cursor:grabbing;
  scroll-snap-type:none;
  scroll-behavior:auto;
  user-select:none;
  -webkit-user-select:none;
}
.shop-track img{ -webkit-user-drag:none; user-select:none; }

/* =========================================================
   FOOTER (نسخه ۴ ستونه)
   ========================================================= */
.site-footer{
  margin-top:80px;
  background:#f1f3f6;
  color:#1f2933;
  border-top:1px solid #d5dbe3;
}

.ft-main{
  width:min(1180px, calc(100% - 40px));
  margin:0 auto;
  padding:64px 0 48px;
  display:grid;
  grid-template-columns:1.3fr .8fr 1fr 1.1fr;
  gap:40px;
  align-items:start;
}

.ft-title{
  position:relative;
  margin:0 0 20px;
  padding-bottom:12px;
  font-size:1rem;
  font-weight:700;
  color:#1f2933;
}
.ft-title::after{
  content:"";
  position:absolute; right:0; bottom:0;
  width:32px; height:3px; border-radius:2px;
  background:var(--amber, #f0b90d);
}
.ft-title-sub{ margin-top:30px; }

/* لیست لینک‌ها */
.ft-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:10px;
}
.ft-list a{
  color:#52606d; font-size:.92rem;
  transition:color .15s ease, padding .15s ease;
}
.ft-list a:hover{ color:#a87c00; padding-right:4px; }

/* اطلاعات تماس */
/* ===== اطلاعات تماس فوتر ===== */
.ft-contact{
  list-style:none; margin:0 0 18px; padding:0;
  display:flex; flex-direction:column; gap:14px;
}
.ft-contact .ft-row{
  display:grid;
  grid-template-columns:34px minmax(0, 1fr);
  column-gap:12px;
  align-items:start;
  justify-content:start;
  margin:0;
}
.ft-contact .ft-ico{
  width:34px; height:34px; padding:8px;
  border-radius:50%; background:#fff; border:1px solid #d5dbe3;
  color:#a87c00;
}
.ft-contact .ft-ct{
  display:flex; flex-direction:column; align-items:flex-start;
  min-width:0; text-align:right; line-height:1.7;
}
.ft-contact small{ color:#52606d; font-size:.78rem; }
.ft-contact .ft-val{
  display:block; color:#1f2933; font-weight:600; font-size:.92rem;
  overflow-wrap:anywhere;
}
.ft-contact a.ft-val:hover{ color:#a87c00; }
.ft-ltr{ direction:ltr; unicode-bidi:isolate; text-align:right; }


/* نقشه */
.ft-map{
  border-radius:10px; overflow:hidden;
  border:1px solid #d5dbe3; background:#e7ebf0;
  aspect-ratio:16/10;
}
.ft-map iframe{ width:100%; height:100%; border:0; display:block; }
.ft-map-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.ft-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 16px; border-radius:6px; font-size:.84rem; font-weight:600;
  border:1px solid #b6bfcb; color:#1f2933; background:#fff;
  transition:background .15s ease, border-color .15s ease;
}
.ft-btn:hover{ border-color:#1f2933; }
.ft-btn-primary{ background:var(--amber, #f0b90d); border-color:var(--amber, #f0b90d); color:#1f2933; }
.ft-btn-primary:hover{ background:var(--amber-2, #ffd23f); border-color:var(--amber-2, #ffd23f); }

/* ستون درباره ما */
.ft-about-text{ color:#52606d; font-size:.92rem; line-height:2; margin:0 0 16px; }
.ft-badges{
  list-style:none; margin:0 0 20px; padding:0;
  display:flex; flex-direction:column; gap:8px;
}
.ft-badges li{
  position:relative; padding-right:22px;
  color:#1f2933; font-size:.88rem;
}
.ft-badges li::before{
  content:""; position:absolute; right:0; top:.55em;
  width:10px; height:10px; border-radius:50%;
  background:var(--amber, #f0b90d);
}
.ft-cta{
  display:flex; align-items:center; justify-content:center;
  padding:13px 20px; border-radius:6px;
  background:var(--amber, #f0b90d); color:#1f2933;
  font-weight:700; font-size:.94rem;
  transition:background .15s ease, transform .15s ease;
}
.ft-cta:hover{ background:var(--amber-2, #ffd23f); transform:translateY(-2px); }
.ft-social{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.ft-social a{
  padding:7px 14px; border-radius:20px; font-size:.82rem; font-weight:600;
  background:#fff; border:1px solid #d5dbe3; color:#1f2933;
  transition:background .15s ease, border-color .15s ease;
}
.ft-social a:hover{ background:var(--amber, #f0b90d); border-color:var(--amber, #f0b90d); }

/* نوار پایین */
.ft-bottom{
  border-top:1px solid #d5dbe3;
  text-align:center; padding:18px 20px;
}
.ft-bottom p{ margin:0; color:#52606d; font-size:.82rem; }

/* ریسپانسیو */
@media (max-width:1024px){
  .ft-main{ grid-template-columns:1fr 1fr; gap:36px; padding:52px 0 40px; }
}
@media (max-width:640px){
  .site-footer{ margin-top:50px; }
  .ft-main{ grid-template-columns:1fr; gap:32px; padding:44px 0 32px; }
}