/* Dara Slider Pro — Frontend CSS 3.0.0 */

    :root{
      --text:#24364a; --muted:#5f7286;
      --blue:#8ed8fb; --blue-strong:#6fc9f2; --line:#a6e6ff;
      --shadow-soft:0 12px 28px rgba(0,0,0,.05);
      --radius:34px; --ease:cubic-bezier(.22,.61,.36,1);
      --speed:.85s; --auto:6500ms;
      --stroke-angle:0deg; --ep:#6EC1E4; --ea:#61CE70;
    }
    *{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
    body{ background:#fff; font-family:Tahoma,"Segoe UI",sans-serif; color:var(--text); }
    button,a{ font-family:inherit; }
    img{ display:block; max-width:100%; }
    @property --stroke-angle{ syntax:"<angle>"; initial-value:0deg; inherits:false; }

    .dara-wrap{ width:var(--dara-w,100%); max-width:var(--dara-mw,1440px); margin:26px auto; padding:0 10px; }

    /* ══ Hero ══ */
    .dara-hero{
      position:relative; border-radius:var(--dara-r,var(--radius));
      background:
        radial-gradient(circle at 15% 0%,rgba(142,216,251,.18),transparent 30%),
        radial-gradient(circle at 82% 8%,rgba(111,201,242,.14),transparent 28%),
        linear-gradient(180deg,#f4fcff 0%,#eaf8fe 100%);
      min-height:var(--dara-h,520px); isolation:isolate; overflow:hidden;
    }
    .dara-hero::before{
      content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
      background:linear-gradient(180deg,rgba(255,255,255,.28) 0%,transparent 26%),
        linear-gradient(120deg,transparent 0%,rgba(255,255,255,.14) 48%,transparent 58%);
    }
    .dara-hero::after{
      content:""; position:absolute; inset:0; padding:1.5px; border-radius:var(--dara-r,var(--radius));
      background:conic-gradient(from var(--stroke-angle),
        rgba(142,216,251,.15) 0deg,rgba(110,193,228,.9) 80deg,rgba(111,201,242,1) 150deg,
        rgba(142,216,251,.4) 200deg,rgba(110,193,228,.9) 280deg,rgba(142,216,251,.15) 360deg);
      -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
      -webkit-mask-composite:xor; mask-composite:exclude;
      animation:spinBorder 4.5s linear infinite; pointer-events:none; z-index:50;
      filter:drop-shadow(0 0 6px rgba(110,193,228,.35));
    }
    @keyframes spinBorder{ to{--stroke-angle:360deg;} }
    @keyframes spinRail{ to{--stroke-angle:360deg;} }
    /* خاموش‌کردن هاله/قاب نورانی سفید با کلاس .dara-no-glow */
    .dara-no-glow .dara-hero::before,
    .dara-no-glow .dara-hero::after{ content:none !important; display:none !important; }
    .dara-no-glow .hero-ambient{ display:none !important; }
    .dara-no-glow .dara-hero{ box-shadow:0 10px 30px rgba(15,40,70,.08); }
    /* حذف محوشدگی سفید روی عکس با کلاس .dara-no-mediafade */
    .dara-no-mediafade .slide-media::after{ content:none !important; display:none !important; }

    .hero-ambient{
      position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:screen;
      background:radial-gradient(circle at 50% 0%,rgba(142,216,251,.08),transparent 20%),
        radial-gradient(circle at 30% 50%,rgba(142,216,251,.05),transparent 26%);
    }

    /* ══ Notch ══ */
    .hero-notch{
      position:absolute; top:-1px; left:50%; transform:translateX(-50%);
      width:390px; height:122px; z-index:30; pointer-events:none;
    }
    .hero-notch svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 12px 18px rgba(0,0,0,.045)); }
    .notch-stroke-base{ stroke:rgba(142,216,251,.28); stroke-width:1.4; fill:none; }
    .notch-stroke-runner{
      stroke:url(#nsg); stroke-width:2.6; fill:none; stroke-linecap:round;
      stroke-dasharray:26 120; stroke-dashoffset:0;
      animation:notchMove 4.2s cubic-bezier(.45,.05,.55,.95) infinite;
      filter:drop-shadow(0 0 6px rgba(142,216,251,.75)) drop-shadow(0 0 16px rgba(142,216,251,.55));
    }
    @keyframes notchMove{ 0%{stroke-dashoffset:0;opacity:.9;} 50%{opacity:1;} 100%{stroke-dashoffset:-150;opacity:.9;} }

    /* ══ Logo ══ */
    .hero-logo{
      position:absolute; top:4px; left:50%; transform:translateX(-50%);
      width:78px; height:78px; z-index:39; display:flex; align-items:center; justify-content:center;
    }
    .hero-logo::before{
      content:""; position:absolute; width:120px; height:120px; border-radius:50%;
      background:radial-gradient(circle,rgba(142,216,251,.26),rgba(142,216,251,0) 68%);
      z-index:-1; animation:logoAura 4.2s ease-in-out infinite;
    }
    .hero-logo img{ width:75%; height:100%; object-fit:contain; filter:drop-shadow(0 6px 10px rgba(0,0,0,.06)); animation:logoFloat 4.8s ease-in-out infinite; }
    @keyframes logoAura{ 0%,100%{transform:scale(.92);opacity:.52;} 50%{transform:scale(1.08);opacity:.96;} }
    @keyframes logoFloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);} }

    /* ══ Counter ══ */
    .slide-counter{
      position:absolute; bottom:28px; right:28px; z-index:45;
      display:flex; align-items:center; gap:6px;
      background:rgba(255,255,255,.72); backdrop-filter:blur(10px);
      border:1px solid rgba(235,240,244,.9); border-radius:20px;
      padding:6px 14px; font-size:13px; font-weight:800; color:#7a8fa2;
      box-shadow:var(--shadow-soft);
    }
    .slide-counter .cur-num{ color:var(--text); font-size:16px; }

    /* ══ Pause/Play ══ */
    .pause-btn{
      position:absolute; bottom:25px; right:98px; z-index:45;
      width:36px; height:36px; border-radius:50%;
      background:rgba(255,255,255,.72); backdrop-filter:blur(10px);
      border:1px solid rgba(235,240,244,.9); box-shadow:var(--shadow-soft);
      cursor:pointer; display:flex; align-items:center; justify-content:center;
      transition:all .3s var(--ease);
    }
    .pause-btn:hover{ background:rgba(255,255,255,.96); transform:scale(1.08); }
    .pause-btn svg{ width:14px; height:14px; fill:#7a8fa2; }
    .pause-btn .icon-play{ display:none; }
    .dara-hero.paused .pause-btn .icon-pause{ display:none; }
    .dara-hero.paused .pause-btn .icon-play{ display:block; }

    /* ══ Progress ══ */
    .hero-progress{
      position:absolute; left:28px; right:160px; bottom:32px; height:4px;
      background:rgba(142,216,251,.24); border-radius:999px; overflow:hidden; z-index:45;
    }
    .hero-progress span{
      display:block; width:100%; height:100%;
      background:linear-gradient(90deg,var(--blue),var(--blue-strong));
      border-radius:inherit; transform-origin:left center; transform:scaleX(0);
      animation:progFill var(--auto) linear infinite;
    }
    .dara-hero.paused .hero-progress span{ animation-play-state:paused; }
    @keyframes progFill{ from{transform:scaleX(0);} to{transform:scaleX(1);} }

    /* ══ Slides ══ */
    .slides-viewport{ position:relative; z-index:2; min-height:var(--dara-h,520px); border-radius:inherit; overflow:hidden; }
    .slides-track{ display:flex; direction:ltr; will-change:transform; transition:transform var(--speed,.85s) cubic-bezier(.22,.61,.36,1); }
    /* GSAP mode: slides stack absolutely */
    /* GSAP mode */
    .slides-track.gsap-driven{ display:block; position:relative; transition:none!important; }
    .slides-track.gsap-driven .slide{
        position:absolute; top:0; left:0; width:100%;
        opacity:0; pointer-events:none;
    }
    .slides-track.gsap-driven .slide.active{
        opacity:1; pointer-events:auto;
        position:relative; /* keeps viewport height */
    }
    .slide{ min-width:100%; min-height:var(--dara-h,520px); display:grid; grid-template-columns:1.02fr .98fr; direction:ltr; position:relative; flex-shrink:0; }
    .slide-media{ position:relative; overflow:hidden; min-height:var(--dara-h,520px); background:#e8f4fb; }
    .media-parallax{ position:absolute; inset:0; transform:scale(1.04); will-change:transform; }
    .slide.active .media-parallax{ animation:kenBurns 9s ease-in-out infinite alternate; }
    .slide:nth-child(odd).active  .media-parallax{ animation-name:kenBurns;  }
    .slide:nth-child(even).active .media-parallax{ animation-name:kenBurns2; }
    @keyframes kenBurns{  0%{transform:scale(1.04) translate(0,0);}  100%{transform:scale(1.10) translate(-14px,-7px);} }
    @keyframes kenBurns2{ 0%{transform:scale(1.04) translate(0,0);}  100%{transform:scale(1.10) translate(12px,-8px);} }
    .slide-media img{ width:100%; height:100%; object-fit:cover; opacity:1; image-rendering:auto; }
    .slide-media::after{
      content:""; position:absolute; inset:0; pointer-events:none;
      background:linear-gradient(to left,rgba(247,248,250,.98) 0%,rgba(247,248,250,.82) 18%,rgba(247,248,250,.3) 44%,rgba(247,248,250,.04) 72%,rgba(247,248,250,0) 100%);
    }
    .slide-content{
      position:relative; z-index:3; display:flex; align-items:center; justify-content:center;
      padding:86px 84px 88px 58px; direction:rtl; text-align:right; min-height:var(--dara-h,520px);
    }
    .content-box{ width:100%; max-width:560px; }
    /* مرز خلاقانه بین ستون عکس و متن: خط نورانیِ روان + ذره‌ی نورانیِ متحرک (comet) */
    .slide.active::after{ content:""; position:absolute; left:51%; top:7%; height:86%; width:2px; transform:translateX(-50%); z-index:7; pointer-events:none; border-radius:3px;
      background:linear-gradient(180deg,transparent 0%,rgba(142,216,251,.12) 12%,var(--blue,#8ed8fb) 38%,var(--blue-strong,#6fc9f2) 50%,var(--blue,#8ed8fb) 62%,rgba(142,216,251,.12) 88%,transparent 100%);
      background-size:100% 320%; box-shadow:0 0 18px 1px rgba(142,216,251,.5); filter:saturate(1.12);
      animation:daraDivFlow 3.6s linear infinite; }
    @keyframes daraDivFlow{ 0%{background-position:0 0;} 100%{background-position:0 -320%;} }
    /* ذره‌ی نورانیِ متحرک روی همان مرز */
    .slide-content::before{ content:""; position:absolute; left:0; top:8%; width:9px; height:9px; transform:translateX(-50%); border-radius:50%; z-index:8; pointer-events:none;
      background:radial-gradient(circle at 50% 50%,#ffffff 0%,var(--blue-strong,#6fc9f2) 55%,rgba(142,216,251,0) 78%);
      box-shadow:0 0 14px 4px rgba(142,216,251,.8); animation:daraComet 3.6s ease-in-out infinite; }
    @keyframes daraComet{ 0%{top:6%;opacity:0;} 12%{opacity:1;} 50%{top:50%;} 88%{opacity:1;} 100%{top:92%;opacity:0;} }
    .eyebrow{ display:inline-flex; align-items:center; gap:10px; color:#8acff2; font-size:15px; font-weight:900; margin-bottom:18px; }
    .eyebrow::before{ content:""; width:24px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--blue),transparent); }
    .content-box h2{ font-size:30px; line-height:1.12; color:var(--text); font-weight:900; letter-spacing:-1.2px; margin-bottom:18px; }
    .content-box p{ color:var(--muted); font-size:18px; line-height:2; font-weight:500; margin-bottom:34px; max-width:540px; }
    .slide .eyebrow,.slide .content-box h2,.slide .content-box p,.slide .meta-row,.slide .hero-actions{
      opacity:0; transform:translateY(22px); transition:opacity .65s ease,transform .65s var(--ease);
    }
    .slide.active .eyebrow{       opacity:1; transform:none; transition-delay:.12s; }
    .slide.active .content-box h2{ opacity:1; transform:none; transition-delay:.22s; }
    .slide.active .content-box p{  opacity:1; transform:none; transition-delay:.32s; }
    .slide.active .meta-row{      opacity:1; transform:none; transition-delay:.42s; }
    .slide.active .hero-actions{  opacity:1; transform:none; transition-delay:.52s; }
    .meta-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:28px; }
    .meta-chip{
      display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:14px;
      background:rgba(255,255,255,.72); backdrop-filter:blur(10px);
      border:1px solid rgba(235,240,244,.95); color:#6d8094; font-size:13px; font-weight:800;
      box-shadow:var(--shadow-soft);
    }
    .meta-chip svg{ width:16px; height:16px; fill:#93d9fb; flex:none; }
    .hero-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
    .btn{
      min-width:162px; height:56px; padding:0 28px;
      display:inline-flex; align-items:center; justify-content:center;
      text-decoration:none; border-radius:16px; font-size:15px; font-weight:900;
      transition:all .42s var(--ease); border:1px solid transparent; position:relative; overflow:hidden;
    }
    .btn-primary{
      color:#fff; background:linear-gradient(135deg,#8ed8fb,#6fc9f2);
      box-shadow:0 16px 34px rgba(142,216,251,.35),inset 0 1px 0 rgba(255,255,255,.34);
    }
    .btn-primary::before{
      content:""; position:absolute; top:0; left:-78%; width:56%; height:100%;
      transform:skewX(-18deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent); transition:.75s;
    }
    .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 20px 38px rgba(142,216,251,.44),inset 0 1px 0 rgba(255,255,255,.34); }
    .btn-primary:hover::before{ left:132%; }
    .btn-secondary{
      color:var(--text); background:rgba(255,255,255,.68); border-color:rgba(235,240,244,.94);
      backdrop-filter:blur(12px); box-shadow:0 10px 24px rgba(0,0,0,.04);
    }
    .btn-secondary:hover{ transform:translateY(-2px); background:rgba(255,255,255,.86); }

    /* ══════════════════════════════
       ARROWS — جذاب با آیکون + لیبل
    ══════════════════════════════ */
    .hero-arrow{
      position:absolute; top:50%; transform:translateY(-50%);
      width:58px; min-height:64px;
      border:none; background:transparent; padding:0;
      z-index:28; cursor:pointer;
      display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
      transition:transform .35s var(--ease);
    }
    .hero-arrow:hover{ transform:translateY(calc(-50% - 3px)); }
    .hero-arrow:active{ transform:translateY(calc(-50% + 1px)); }

    /* glass card */
    .arrow-bg{
      position:absolute; inset:0; border-radius:20px;
      background:rgba(255,255,255,.76);
      border:1px solid rgba(180,224,246,.8);
      backdrop-filter:blur(16px);
      box-shadow:0 8px 28px rgba(110,193,228,.13),inset 0 1px 0 rgba(255,255,255,.9);
      transition:all .35s var(--ease);
    }
    .hero-arrow:hover .arrow-bg{
      background:rgba(255,255,255,.96);
      border-color:rgba(142,216,251,.75);
      box-shadow:0 14px 36px rgba(110,193,228,.28),inset 0 1px 0 #fff;
    }

    /* ripple */
    .arrow-ripple{
      position:absolute; inset:0; border-radius:20px;
      background:radial-gradient(circle at center,rgba(142,216,251,.32),transparent 70%);
      opacity:0; transform:scale(.5); pointer-events:none;
      transition:none;
    }
    .hero-arrow:active .arrow-ripple{ opacity:1; transform:scale(1.5); transition:all .4s ease-out; }

    /* icon area */
    .arrow-icon{
      position:relative; z-index:2;
      width:34px; height:34px; border-radius:12px;
      background:linear-gradient(135deg,rgba(142,216,251,.22),rgba(111,201,242,.12));
      display:flex; align-items:center; justify-content:center;
      transition:all .35s var(--ease);
    }
    .hero-arrow:hover .arrow-icon{
      background:linear-gradient(135deg,rgba(142,216,251,.38),rgba(111,201,242,.25));
    }
    .arrow-icon svg{
      width:20px; height:20px; fill:none;
      stroke:#4badd4; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
      transition:stroke .35s ease, transform .35s var(--ease);
    }
    .hero-arrow.prev:hover .arrow-icon svg{ transform:translateX(-2px); }
    .hero-arrow.next:hover .arrow-icon svg{ transform:translateX(2px); }

    /* label */
    .arrow-label{
      position:relative; z-index:2;
      font-size:9.5px; font-weight:900; color:#7abcd6; line-height:1;
      letter-spacing:.4px; transition:color .35s ease; white-space:nowrap;
    }
    .hero-arrow:hover .arrow-label{ color:#3a9ec7; }

    .hero-arrow.prev{ left:106px; }
    .hero-arrow.next{ right:22px; }

    /* ══════════════════════════════
       VERTICAL RAIL
    ══════════════════════════════ */
    .center-rail{
      position:absolute; top:50%; left:18px; transform:translateY(-50%);
      z-index:25;
      height:calc(100% - 140px); max-height:500px;
      display:flex; flex-direction:column; align-items:center; gap:6px;
    }

    /* scroll buttons bالا / پایین */
    .rail-scroll-btn{
      width:34px; height:34px; border-radius:50%; flex-shrink:0;
      border:1px solid rgba(190,230,248,.85);
      background:rgba(255,255,255,.80); backdrop-filter:blur(10px);
      box-shadow:0 4px 14px rgba(110,193,228,.13);
      cursor:pointer; display:flex; align-items:center; justify-content:center;
      transition:all .3s var(--ease); z-index:12; position:relative;
    }
    .rail-scroll-btn svg{
      width:14px; height:14px; fill:none;
      stroke:#64b8d8; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round;
      transition:all .3s ease;
    }
    .rail-scroll-btn:hover{
      background:rgba(255,255,255,.98);
      box-shadow:0 6px 22px rgba(110,193,228,.28);
      border-color:rgba(142,216,251,.72);
      transform:scale(1.1);
    }
    .rail-scroll-btn:hover svg{ stroke:#2fa0cc; transform:scale(1.15); }
    .rail-scroll-btn:disabled{ opacity:.22; cursor:default; transform:none !important; box-shadow:none; }

    /* glowing line */
    .rail-track-line{
      position:absolute; top:46px; bottom:46px; left:50%; transform:translateX(-50%);
      width:3px; border-radius:8px; pointer-events:none; z-index:0;
      background:linear-gradient(180deg,rgba(166,230,255,.05) 0%,rgba(166,230,255,.88) 14%,rgba(166,230,255,.88) 86%,rgba(166,230,255,.05) 100%);
      box-shadow:0 0 14px rgba(142,216,251,.18);
    }

    /* flowing energy dot */
    .rail-flow-dot{
      position:absolute; top:46px; left:50%; transform:translateX(-50%);
      width:10px; height:10px; border-radius:50%; pointer-events:none; z-index:5;
      background:radial-gradient(circle,#fff 0%,#dff6ff 20%,#8ed8fb 60%,#5dc3ed 100%);
      box-shadow:0 0 0 4px rgba(142,216,251,.12),0 0 14px rgba(142,216,251,.9),0 0 28px rgba(142,216,251,.5);
      animation:flowDown 3.8s cubic-bezier(.45,.05,.55,.95) infinite;
    }
    @keyframes flowDown{
      0%  { top:46px;              opacity:0; transform:translateX(-50%) scale(.7); }
      8%  {                        opacity:1; transform:translateX(-50%) scale(1);  }
      88% {                        opacity:.9; }
      100%{ top:calc(100% - 46px); opacity:0; transform:translateX(-50%) scale(.8); }
    }

    /* active dot indicator */
    .rail-indicator{
      position:absolute; top:0; left:50%; transform:translateX(-50%);
      width:9px; height:9px; border-radius:50%; background:var(--blue);
      box-shadow:0 0 0 5px rgba(142,216,251,.12),0 0 18px rgba(142,216,251,.9);
      transition:top .6s var(--ease); z-index:6; pointer-events:none;
    }

    /* scroll outer */
    .rail-scroll-outer{
      position:relative; flex:1; min-height:0; width:76px; overflow:hidden;
    }
    .rail-scroll-outer::before,
    .rail-scroll-outer::after{
      content:""; position:absolute; left:0; right:0; height:28px; z-index:10; pointer-events:none;
    }
    .rail-scroll-outer::before{ top:0;    background:linear-gradient(to bottom,rgba(244,252,255,.98),rgba(244,252,255,0)); }
    .rail-scroll-outer::after { bottom:0; background:linear-gradient(to top,  rgba(234,248,254,.98),rgba(234,248,254,0)); }

    .rail-menu{
      display:flex; flex-direction:column; align-items:center; gap:10px;
      height:100%; overflow-y:auto; overflow-x:visible;
      padding:12px 3px; scrollbar-width:none; -ms-overflow-style:none;
      scroll-behavior:smooth;
    }
    .rail-menu::-webkit-scrollbar{ display:none; }

    /* tab button */
    .rail-item{
      width:70px; height:70px; border-radius:20px; flex-shrink:0;
      border:1px solid rgba(237,242,246,.9);
      background:linear-gradient(#fff,#fff) padding-box,
        linear-gradient(135deg,rgba(110,193,228,.25),rgba(255,255,255,.8)) border-box;
      box-shadow:var(--shadow-soft);
      display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
      cursor:pointer; position:relative; z-index:3;
      transition:all .4s var(--ease); user-select:none; overflow:hidden; isolation:isolate;
    }
    .rail-item::before{
      content:""; position:absolute; inset:0; padding:1.6px; border-radius:inherit;
      background:conic-gradient(from var(--stroke-angle),
        transparent 0deg,rgba(110,193,228,.18) 45deg,rgba(110,193,228,.95) 90deg,
        rgba(255,255,255,.95) 125deg,transparent 170deg,transparent 360deg);
      -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
      -webkit-mask-composite:xor; mask-composite:exclude;
      animation:spinRail 3.2s linear infinite; pointer-events:none; z-index:1; opacity:.75;
    }
    .rail-item::after{
      content:""; position:absolute; inset:1px; border-radius:inherit;
      background:radial-gradient(circle at 50% 0%,rgba(110,193,228,.16),transparent 48%),
        linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.55));
      opacity:.45; z-index:0; pointer-events:none;
    }
    .rail-item .tab-icon{
      position:relative; z-index:2; width:32px; height:32px; border-radius:8px;
      object-fit:cover; flex-shrink:0; transition:all .4s var(--ease); pointer-events:none;
    }
    .rail-item span{
      position:relative; z-index:2; font-size:8.5px; color:#728295;
      font-weight:900; line-height:1; transition:all .4s var(--ease); white-space:nowrap;
    }
    /* tooltip */
    .rail-item[data-tip]::after{
      content:attr(data-tip);
      position:absolute; right:calc(100% + 10px); top:50%; transform:translateY(-50%);
      background:rgba(30,50,70,.85); color:#fff; font-size:11px; font-weight:700;
      padding:5px 10px; border-radius:8px; white-space:nowrap;
      opacity:0; pointer-events:none; transition:opacity .2s ease;
      backdrop-filter:blur(6px); z-index:20;
    }
    .rail-item[data-tip]:hover::after{ opacity:1; }
    .rail-item:hover{ transform:scale(1.04); box-shadow:0 14px 30px rgba(0,0,0,.06),0 0 22px rgba(110,193,228,.18); }
    .rail-item.active{
      background:linear-gradient(135deg,var(--blue),var(--blue-strong)) padding-box,
        linear-gradient(135deg,#fff,var(--ep),var(--ea)) border-box;
      border-color:transparent;
      box-shadow:0 16px 34px rgba(142,216,251,.38),0 0 0 5px rgba(110,193,228,.10),0 0 26px rgba(110,193,228,.32);
      transform:scale(1.07);
    }
    .rail-item.active:hover{ transform:scale(1.09); }
    .rail-item.active::before{
      opacity:1; padding:2px;
      background:conic-gradient(from var(--stroke-angle),
        rgba(255,255,255,.15) 0deg,#fff 55deg,var(--ep) 105deg,
        #fff 145deg,rgba(97,206,112,.85) 205deg,var(--ep) 270deg,rgba(255,255,255,.18) 360deg);
      animation-duration:2.1s;
    }
    .rail-item.active::after{ background:none; opacity:0!important; pointer-events:none; }
    .rail-item.active .tab-icon{ filter:brightness(0) invert(1); }
    .rail-item.active span{ color:#fff; }

    /* ══ Responsive ══ */
    @media (max-width:1200px){
      .content-box h2{ font-size:22px; }
      .content-box p{ font-size:16px; }
      .slide-content{ padding-right:60px; }
    }

    @media (max-width:980px){
      .dara-hero,.slides-viewport,.slide,.slide-media,.slide-content{ min-height:auto; }
      .slide.active::after,.slide-content::before{ display:none; }
      .slide{ grid-template-columns:1fr; }
      .slide-media{ order:1; height:290px; min-height:0; }
      .slide-media::after{ background:linear-gradient(to bottom,rgba(247,248,250,0) 0%,rgba(247,248,250,.16) 56%,rgba(247,248,250,.98) 100%); }
      .slide-content{ order:2; text-align:center; padding:44px 24px 120px; min-height:0; }
      .content-box{ max-width:100%; }
      .content-box h2{ font-size:26px; }
      .content-box p{ max-width:100%; font-size:15px; }
      .meta-row,.hero-actions{ justify-content:center; }
      .center-rail{ top:auto; bottom:52px; left:50%; right:auto; transform:translateX(-50%); height:auto; max-height:none; flex-direction:row; width:auto; gap:4px; }
      .rail-track-line,.rail-indicator,.rail-flow-dot,.rail-scroll-btn{ display:none; }
      .rail-scroll-outer{ width:auto; height:auto; overflow:hidden; flex:unset; }
      .rail-scroll-outer::before,.rail-scroll-outer::after{ display:none; }
      .rail-menu{ flex-direction:row; height:auto; max-width:90vw; overflow-x:auto; overflow-y:visible; padding:4px 8px; gap:8px; }
      .rail-item[data-tip]::after{ display:none; }
      .hero-progress{ left:18px; right:158px; bottom:20px; }
      .pause-btn{ bottom:14px; right:98px; }
      .slide-counter{ bottom:14px; right:28px; }
      .hero-notch{ top:-8px; width:285px; height:92px; }
      .hero-logo{ top:-2px; width:62px; height:62px; }
      .hero-logo::before{ width:90px; height:90px; }
      .hero-arrow.prev{ left:22px; }
      /* در تبلت فلش‌ها فقط آیکون دارند */
      .arrow-label{ display:none; }
      .hero-arrow{ width:46px; min-height:46px; }
    }

    @media (max-width:640px){
      .dara-wrap{ margin:6px auto; padding:0 6px; }
      .dara-hero{ border-radius:20px; }
      .slide-media{ height:165px; min-height:0; }
      .media-parallax{ transform:scale(1.03); }
      .slide.active .media-parallax{ animation:none; }
      .slide-content{ padding:22px 14px 100px; }
      .eyebrow{ font-size:12px; margin-bottom:8px; }
      .eyebrow::before{ width:16px; }
      .content-box h2{ font-size:20px; line-height:1.35; margin-bottom:10px; }
      .content-box p{ font-size:13px; line-height:1.75; margin-bottom:14px; }
      .meta-row{ gap:6px; margin-bottom:12px; }
      .meta-chip{ font-size:10px; padding:6px 8px; border-radius:10px; }
      .meta-chip svg{ width:13px; height:13px; }
      .hero-actions{ gap:8px; }
      .btn{ height:42px; min-width:100%; width:100%; font-size:13px; border-radius:12px; padding:0 16px; }
      .center-rail{ bottom:48px; }
      .rail-item{ width:48px; height:48px; border-radius:13px; gap:3px; }
      .rail-item .tab-icon{ width:22px; height:22px; border-radius:6px; }
      .rail-item span{ font-size:7px; }
      .hero-progress{ left:12px; right:140px; bottom:16px; height:3px; }
      .pause-btn{ bottom:11px; right:80px; width:30px; height:30px; }
      .pause-btn svg{ width:11px; height:11px; }
      .slide-counter{ bottom:11px; right:12px; padding:4px 10px; font-size:11px; }
      .slide-counter .cur-num{ font-size:13px; }
      .hero-notch{ top:-13px; width:210px; height:70px; }
      .hero-logo{ top:-7px; width:48px; height:48px; }
      .hero-logo::before{ width:70px; height:70px; }
      .hero-arrow{ width:38px; min-height:38px; border-radius:14px; }
      .arrow-icon{ width:28px; height:28px; border-radius:9px; }
      .arrow-icon svg{ width:16px; height:16px; stroke-width:2.2; }
      .hero-arrow.prev{ left:8px; }
      .hero-arrow.next{ right:8px; }
    }

    @media (prefers-reduced-motion:reduce){
      *,*::before,*::after{ animation:none!important; transition:none!important; }
    }
  
/* ══ Gallery ══ */
.slide-gallery{
    position:absolute; bottom:0; left:0; right:0;
    display:flex; gap:8px; padding:10px 14px;
    background:linear-gradient(to top,rgba(0,0,0,.45),transparent);
    overflow-x:auto; scrollbar-width:none; z-index:5;
}
.slide-gallery::-webkit-scrollbar{display:none;}
.gallery-thumb{
    flex-shrink:0; border:none; padding:0; cursor:pointer;
    border-radius:8px; overflow:hidden;
    border:2.5px solid rgba(255,255,255,.45);
    transition:all .28s cubic-bezier(.22,.61,.36,1);
    background:none;
}
.gallery-thumb:hover{
    border-color:rgba(255,255,255,.95);
    transform:translateY(-3px) scale(1.06);
    box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.gallery-thumb.active{
    border-color:#8ed8fb;
    box-shadow:0 0 0 2px #8ed8fb, 0 6px 20px rgba(142,216,251,.4);
    transform:translateY(-3px) scale(1.08);
}
.gallery-thumb img{
    display:block; object-fit:cover;
    width:100%; height:100%;
}

/* gallery overlay position */
.slide-gallery.gallery-overlay{
    position:absolute; bottom:10px;
}

/* tab-icon placeholder */
.tab-icon-text{
    position:relative; z-index:2;
    width:32px; height:32px; border-radius:8px;
    background:rgba(142,216,251,.2);
    display:flex; align-items:center; justify-content:center;
    font-size:16px; font-weight:900; color:#4a90c4;
}

/* ══ BOTTOM TABS ══ */
.dara-pos-bottom .dara-hero{ border-radius:var(--dara-r,var(--radius,24px)) var(--dara-r,var(--radius,24px)) 0 0; }
.dara-tabs-bar{ display:flex; align-items:center; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; background:var(--dara-tabbarbg,linear-gradient(180deg,#ffffff,#f6fbfe)); border:1px solid rgba(226,237,245,.9); border-top:none; border-radius:0 0 var(--dara-r,24px) var(--dara-r,24px); padding:8px 6px; box-shadow:0 8px 26px rgba(20,60,90,.07); }
.dara-tabs-bar::-webkit-scrollbar{ height:7px; }
.dara-tabs-bar::-webkit-scrollbar-track{ background:transparent; }
.dara-tabs-bar::-webkit-scrollbar-thumb{ background:rgba(142,216,251,.55); border-radius:4px; }
.dara-tabs-bar{ scrollbar-width:thin; scrollbar-color:rgba(142,216,251,.55) transparent; }
.dara-tabs-align-center{ justify-content:center; }
.dara-tabs-align-right{ justify-content:flex-end; }
.dara-tabs-align-left{ justify-content:flex-start; }
.dara-tab-btn{ position:relative; min-width:var(--dara-tabw,104px); width:auto; max-width:280px; height:var(--dara-tabh,58px); flex:0 0 auto; margin:3px; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:7px; padding:6px 14px; background:rgba(142,216,251,.06); border:1px solid rgba(226,237,245,.9); border-radius:10px; cursor:pointer; color:var(--dara-tabinactive,#728295); font-family:Tahoma,"Segoe UI",sans-serif; font-size:11px; font-weight:700; white-space:nowrap; transition:all .26s cubic-bezier(.22,.61,.36,1); outline:none; overflow:hidden; }
.dara-tab-btn.active{ background:linear-gradient(135deg,var(--dara-tabactivebg,#8ed8fb),var(--dara-tabstrong,#6fc9f2)); color:var(--dara-tabactivecolor,#fff); }
.dara-tab-btn::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; border-radius:0 0 4px 4px; background:var(--blue,#8ed8fb); transform:scaleX(0); transition:transform .3s cubic-bezier(.22,.61,.36,1); }
.dara-tab-btn:hover{ background:rgba(142,216,251,.14); transform:translateY(-2px); }
.dara-tab-btn:hover::before{ transform:scaleX(.5); }
.dara-tab-btn.active::before{ transform:scaleX(1); }
.dara-tab-btn.active{ border-color:transparent; box-shadow:0 6px 16px rgba(142,216,251,.32); }
.dara-tab-icon{ width:28px; height:28px; object-fit:contain; border-radius:8px; transition:transform .26s; flex:none; }
.dara-tab-btn:hover .dara-tab-icon{ transform:translateY(-2px); }
.dara-tab-letter{ width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,rgba(142,216,251,.22),rgba(111,201,242,.12)); color:#3f8fc0; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:900; flex:none; box-shadow:inset 0 0 0 1px rgba(142,216,251,.25); transition:all .26s; }
.dara-tab-btn.active .dara-tab-letter{ background:rgba(255,255,255,.28); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); }
.dara-tab-btn.active .dara-tab-icon{ transform:scale(1.06); filter:brightness(0) invert(1); }
.dara-tab-btn.active .dara-tab-lbl{ color:#fff; }
.dara-tab-lbl{ line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:210px; }

/* ══ SIDE RAIL ══ */
.dara-side-layout{ display:flex; direction:rtl; }
.dara-side-rail{ width:80px; flex-shrink:0; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border:1px solid rgba(226,237,245,.9); border-left:none; border-radius:24px 0 0 24px; display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 6px; position:relative; }
.dara-rail-line{ position:absolute; top:50px; bottom:50px; left:50%; transform:translateX(-50%); width:3px; border-radius:8px; background:linear-gradient(180deg,rgba(166,230,255,.05) 0%,rgba(166,230,255,.85) 14%,rgba(166,230,255,.85) 86%,rgba(166,230,255,.05) 100%); pointer-events:none; }
.dara-rail-dot{ position:absolute; left:50%; transform:translateX(-50%); width:8px; height:8px; border-radius:50%; background:radial-gradient(circle,#fff 0%,#8ed8fb 60%,#5dc3ed 100%); box-shadow:0 0 12px rgba(142,216,251,.9); animation:railDotFlow 3.8s ease-in-out infinite; pointer-events:none; z-index:3; top:50px; }
@keyframes railDotFlow{ 0%{top:50px;opacity:0;} 10%{opacity:1;} 90%{opacity:.8;} 100%{top:calc(100% - 50px);opacity:0;} }
.dara-rail-ind{ position:absolute; left:50%; transform:translateX(-50%); width:8px; height:8px; border-radius:50%; background:var(--blue,#8ed8fb); box-shadow:0 0 14px rgba(142,216,251,.9); transition:top .5s cubic-bezier(.22,.61,.36,1); z-index:4; pointer-events:none; top:50px; }
.dara-rail-scroll{ width:30px; height:30px; border-radius:50%; flex-shrink:0; border:1px solid rgba(190,230,248,.8); background:rgba(255,255,255,.8); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .25s; z-index:5; }
.dara-rail-scroll svg{ width:13px; height:13px; fill:none; stroke:#64b8d8; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
.dara-rail-scroll:hover{ background:#fff; transform:scale(1.1); }
.dara-rail-scroll:disabled{ opacity:.2; cursor:default; transform:none!important; }
.dara-rail-outer{ position:relative; flex:1; min-height:0; width:68px; overflow:hidden; }
.dara-rail-outer::before,.dara-rail-outer::after{ content:""; position:absolute; left:0; right:0; height:22px; z-index:10; pointer-events:none; }
.dara-rail-outer::before{ top:0; background:linear-gradient(to bottom,rgba(255,255,255,.98),transparent); }
.dara-rail-outer::after{ bottom:0; background:linear-gradient(to top,rgba(255,255,255,.98),transparent); }
.dara-rail-menu{ display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; overflow-y:auto; overflow-x:visible; padding:10px 2px; scrollbar-width:none; scroll-behavior:smooth; }
.dara-rail-menu::-webkit-scrollbar{ display:none; }
.dara-slider-wrap{ flex:1; min-width:0; }
.dara-rail-item{ width:60px; height:60px; border-radius:16px; flex-shrink:0; border:1px solid rgba(237,242,246,.9); background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; cursor:pointer; position:relative; z-index:3; transition:all .32s cubic-bezier(.22,.61,.36,1); user-select:none; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.dara-rail-item:hover{ transform:scale(1.04); box-shadow:0 6px 18px rgba(110,193,228,.2); }
.dara-rail-item.active{ background:linear-gradient(135deg,#8ed8fb,#6fc9f2); transform:scale(1.07); box-shadow:0 10px 28px rgba(142,216,251,.38); border-color:transparent; }
.dara-rail-item .tab-icon{ width:26px; height:26px; border-radius:6px; object-fit:cover; }
.dara-rail-item .tab-letter{ width:26px; height:26px; border-radius:6px; background:rgba(142,216,251,.15); color:#4a90c4; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:900; }
.dara-rail-item span{ font-size:7.5px; color:#728295; font-weight:900; }
.dara-rail-item.active .tab-icon{ filter:brightness(0) invert(1); }
.dara-rail-item.active span{ color:#fff; }
.dara-rail-item.active .tab-letter{ background:rgba(255,255,255,.25); color:#fff; }
.dara-rail-item[data-tip]::after{ content:attr(data-tip); position:absolute; right:calc(100% + 8px); top:50%; transform:translateY(-50%); background:rgba(30,50,70,.85); color:#fff; font-size:10px; font-weight:700; padding:4px 8px; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .18s; z-index:20; }
.dara-rail-item[data-tip]:hover::after{ opacity:1; }

/* ══ Gallery ══ */
.slide-gallery{ position:absolute; bottom:0; left:0; right:0; display:flex; gap:7px; padding:9px 12px; background:linear-gradient(to top,rgba(0,0,0,.5),transparent); overflow-x:auto; scrollbar-width:none; z-index:5; }
.slide-gallery::-webkit-scrollbar{ display:none; }
.gallery-thumb{ flex-shrink:0; border:none; padding:0; cursor:pointer; border-radius:8px; overflow:hidden; border:2.5px solid rgba(255,255,255,.4); background:none; transition:all .25s cubic-bezier(.22,.61,.36,1); }
.gallery-thumb img{ display:block; object-fit:cover; width:100%; height:100%; }
.gallery-thumb:hover{ border-color:rgba(255,255,255,.9); transform:translateY(-3px) scale(1.06); box-shadow:0 6px 16px rgba(0,0,0,.3); }
.gallery-thumb.g-active{ border-color:#8ed8fb; box-shadow:0 0 0 2px #8ed8fb,0 6px 18px rgba(142,216,251,.4); transform:translateY(-3px) scale(1.08); }

.notch-runner{ animation:notchMove 4.2s cubic-bezier(.45,.05,.55,.95) infinite; filter:drop-shadow(0 0 6px rgba(142,216,251,.75)); }
@keyframes notchMove{ 0%{stroke-dashoffset:0;opacity:.9;} 50%{opacity:1;} 100%{stroke-dashoffset:-150;opacity:.9;} }

@media(max-width:980px){
  .dara-side-layout{ flex-direction:column; }
  .dara-side-rail{ width:100%; flex-direction:row; border-radius:0; padding:6px; border:1px solid rgba(226,237,245,.9); border-bottom:none; border-left:1px solid rgba(226,237,245,.9); }
  .dara-rail-line,.dara-rail-ind,.dara-rail-dot,.dara-rail-scroll{ display:none; }
  .dara-rail-outer{ height:auto; overflow-x:auto; overflow-y:visible; flex:unset; width:auto; max-width:90vw; }
  .dara-rail-outer::before,.dara-rail-outer::after{ display:none; }
  .dara-rail-menu{ flex-direction:row; height:auto; padding:4px; gap:6px; }
  .dara-tabs-bar{ border-radius:0 0 16px 16px; }
  .dara-tab-btn{ margin:3px; padding:5px 8px; }
}
@media(max-width:640px){
  .dara-tab-btn{ margin:3px; padding:4px 6px; font-size:9px; }
  .dara-tab-icon,.dara-tab-letter{ width:20px; height:20px; }
  .dara-rail-item{ width:46px; height:46px; border-radius:12px; }
}