:root{
    --accent:#e8620c;
    --dark:#101010;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;width:100%;background:#000;}
  .carousel-wrapper{
    position:relative;
    width:100%;
    max-width:100%;
    overflow:hidden;
    background:#000;
    aspect-ratio:1570/573;
  }
  .carousel-track{
    display:flex;
    height:100%;
    transition:transform 0.7s cubic-bezier(.65,.05,.36,1);
    will-change:transform;
  }
  .carousel-track.no-transition{ transition:none; }
  .slide{
    flex:0 0 100%;
    width:100%;
    height:100%;
  }
  .slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    -webkit-user-drag:none;
    user-select:none;
  }
  .arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:rgba(0,0,0,0.45);
    color:#fff;
    border:none;
    width:44px;
    height:44px;
    border-radius:50%;
    font-size:22px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:5;
    transition:background 0.2s;
  }
  .arrow:hover{ background:rgba(232,98,12,0.85); }
  .arrow.prev{ left:14px; }
  .arrow.next{ right:14px; }
  .dots{
    position:absolute;
    bottom:14px;
    left:0;
    right:0;
    display:flex;
    justify-content:center;
    gap:8px;
    z-index:5;
  }
  .dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:rgba(255,255,255,0.5);
    cursor:pointer;
    transition:all 0.25s;
    border:1px solid rgba(0,0,0,0.2);
  }
  .dot.active{
    background:var(--accent);
    width:22px;
    border-radius:5px;
  }
  .progress-bar{
    position:absolute;
    top:0;
    left:0;
    height:4px;
    background:var(--accent);
    width:0%;
    z-index:6;
  }
  @media (max-width:600px){
    .arrow{ width:34px; height:34px; font-size:16px; }
    .arrow.prev{ left:6px; }
    .arrow.next{ right:6px; }
    .dots{ bottom:8px; gap:6px; }
    .dot{ width:7px; height:7px; }
    .dot.active{ width:16px; }
  }