@keyframes kenburns {
        0%   { transform: scale(1.12) translateY(0) translateX(0) }
        100% { transform: scale(1.20) translateY(-2%) translateX(2%) }
      }
      .kenburns { animation: kenburns 12s ease-in-out both; transition: transform 1s ease-out; }
      [data-hero].group:hover .kenburns { transform: scale(1.28); }
      .chevrons { position: relative; display: inline-block; width: 18px; height: 18px; }
      .chevrons::before, .chevrons::after {
        content: ""; position: absolute; left: 50%; transform: translateX(-50%);
        border-left: 6px solid transparent; border-right: 6px solid transparent;
      }
      .chevrons.up::before  { border-bottom: 6px solid currentColor; top: 2px; }
      .chevrons.up::after   { border-bottom: 6px solid currentColor; top: 8px; }
      .chevrons.down::before{ border-top: 6px solid currentColor; bottom: 8px; }
      .chevrons.down::after { border-top: 6px solid currentColor; bottom: 2px; }
      .reveal-hero { opacity: 0; transform: translateY(12px); }
      .reveal-hero.show { opacity: 1; transform: translateY(0); transition: opacity .6s ease, transform .6s ease; }
      .reveal-hero-delayed { opacity: 0; transform: translateY(12px); }
      .reveal-hero-delayed.show { opacity: 1; transform: translateY(0); transition: opacity .6s ease .1s, transform .6s ease .1s; }
      @media (prefers-reduced-motion: reduce) {
        .kenburns { animation: none !important; }
        .reveal-hero.show, .reveal-hero-delayed.show { transition: none !important; }
      }
      .tri-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; line-height: 0; }
      .tri { display: block; width: 20px; height: 12px; background: currentColor; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); transition: transform .2s ease; }
      .tri.dim  { opacity: .45; width: 18px; height: 10px; }
      .tri.bold { opacity: 1;   width: 20px; height: 12px; }
      .tri + .tri { margin-top: -3px; }
      .tri-wrap.down { transform: rotate(180deg); }
      .hero-track .slide:first-child { opacity: 1; transform: scale(1); pointer-events: auto; z-index: 10; }
      .cta{ transition: transform .22s ease, padding .22s ease, box-shadow .22s ease; will-change: transform, padding; }
      .cta:hover{ transform: translateZ(0) scale(1.10); padding-inline: 2.2rem; padding-block: 1.05rem; box-shadow: 0 16px 40px rgba(0,0,0,.32); }
      .hero-card .kenburns{ z-index:0 !important; }
      .hero-card .content{ position:relative; z-index:60 !important; }
      .hero-track .slide:first-child .reveal-hero,
      .hero-track .slide:first-child .reveal-hero-delayed{ opacity:1; transform:none; }
      .hero-card .kenburns{ z-index:0 !important; }
      .hero-card .content{ position:relative; z-index:60 !important; }
      .hero-track .slide:first-child .reveal-hero,
      .hero-track .slide:first-child .reveal-hero-delayed{ opacity:1; transform:none; }
      .cta{ transition: transform .22s ease, padding .22s ease, box-shadow .22s ease; will-change: transform, padding; }
      .cta:hover{ transform: translateZ(0) scale(1.10); padding-inline: 2.2rem; padding-block: 1.05rem; box-shadow: 0 16px 40px rgba(0,0,0,.32); }
      .hero-card .kenburns{ z-index:0 !important; }
      .hero-card .overlay{ z-index:10 !important; }
      .hero-card .content{ position:relative; z-index:60 !important; }
      .hero-card .reveal-hero,
      .hero-card .reveal-hero-delayed{
        opacity: 1 !important;
        transform: none !important;
      }
      a.cta{
        transition: transform .22s ease, padding .22s ease, box-shadow .22s ease !important;
        will-change: transform, padding;
      }
      a.cta:hover{
        transform: translateZ(0) scale(1.10) !important;
        padding-inline: 2.2rem !important;
        padding-block: 1.05rem !important;
        box-shadow: 0 16px 40px rgba(0,0,0,.32) !important;
      }
      @keyframes kenburns { 0% {transform:scale(1.12)} 100% {transform:scale(1.20) translateY(-2%) translateX(2%)} }
      .kenburns { animation: kenburns 12s ease-in-out both; transition: transform 1s ease-out; }
      [data-hero].group:hover .kenburns { transform: scale(1.26); }
      .tri-wrap{ display:inline-flex; flex-direction:column; align-items:center; gap:2px; line-height:0; }
      .tri{ display:block; width:20px; height:12px; background:currentColor; clip-path:polygon(50% 0%,0% 100%,100% 100%); transition:transform .2s ease; }
      .tri.dim{ opacity:.45; width:18px; height:10px; }
      .tri.bold{ opacity:1; width:20px; height:12px; }
      .tri + .tri{ margin-top:-3px; }
      .tri-wrap.down{ transform:rotate(180deg); }
      .cta{ transition: transform .22s ease, padding .22s ease, box-shadow .22s ease; will-change: transform, padding; }
      .cta:hover{ transform: scale(1.08); padding-inline: 2.1rem; box-shadow: 0 16px 40px rgba(0,0,0,.28); }
      .hero-track .slide:first-child{ opacity:1; transform:scale(1); pointer-events:auto; z-index:10; }
      @media (prefers-reduced-motion: reduce){
        .kenburns{ animation:none !important; }
      }
      .no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.no-scrollbar::-webkit-scrollbar{display:none}
      .dot{height:10px;width:10px;border-radius:9999px;background:#d1d5db;transition:all .25s}
      .dot.active{width:34px;background:#111827}
      .arrow-btn{
        background: transparent;
        border: none;
        box-shadow: none;
        border-radius: 0;
        width: auto; height: auto;
        padding: .375rem;
        color: #111827;
        opacity: .95;
        transition: transform .18s ease, opacity .18s ease;
      }
      .arrow-btn:hover{ transform: translateY(-1px); opacity: 1; }
      .rounded-r-3xl{ border-top-right-radius:1.5rem; border-bottom-right-radius:1.5rem; }
      .scroll-x::-webkit-scrollbar { display: none; }
      .scroll-x { -ms-overflow-style: none; scrollbar-width: none; }
      [dir="rtl"] .overlay-dir{
        background-image: linear-gradient(to left, rgba(0,0,0,.6), rgba(0,0,0,.3), transparent);
      }
      [dir="ltr"] .overlay-dir{
        background-image: linear-gradient(to right, rgba(0,0,0,.6), rgba(0,0,0,.3), transparent);
      }
      [dir="rtl"] .arrow-dir{ transform: scaleX(-1); }

  
/* رنگ لیست گزینه‌ها در مرورگرهایی که اجازه می‌دهند */
select option { background-color: #ffffff; color: #111827; }
html.dark select option { background-color: #0a0a0a; color: #f3f4f6; }

/* بعضی مرورگرها به color-scheme توجه می‌کنند؛ این کمک می‌کند */
select { color-scheme: light; }
html.dark select { color-scheme: dark; }

/* اگر قبلاً به‌صورت سراسری break-word/anywhere داده‌ای، متن گزینه‌ها خوانا بماند */
select, select option { word-break: normal; overflow-wrap: normal; }