/* ============================================================
   Texno Çinar - Video həllər səhifəsi
   ============================================================ */
.videos-body{
  background:
    radial-gradient(circle at 7% 34%, rgba(229,244,236,.72) 0 9%, transparent 18%),
    radial-gradient(circle at 92% 33%, rgba(229,244,236,.86) 0 10%, transparent 20%),
    #fff;
}
.videos-body footer{
  margin-top:16px;
}
.video-page{
  position:relative;
  overflow:hidden;
}
.video-wrap{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

/* ============ HERO ============ */
.video-hero{
  position:relative;
  min-height:336px;
  padding:28px 0 0;
}
.video-hero-inner{
  position:relative;
  min-height:318px;
}
.video-hero-copy{
  position:relative;
  z-index:4;
  max-width:690px;
  margin:0 auto;
  padding-top:108px;
  text-align:center;
}
.video-hero-copy h1{
  color:#071331;
  font-size:clamp(40px,4.5vw,60px);
  font-weight:800;
  letter-spacing:0;
  line-height:1.02;
}
.video-hero-copy p{
  margin:15px 0 0;
  color:#1c263d;
  font-size:17px;
  font-weight:500;
  line-height:1.35;
}
.video-hero-copy p span{
  color:#e52b18;
  font-weight:800;
}
.video-title-mark{
  position:relative;
  width:150px;
  height:24px;
  margin:13px auto 0;
}
.video-title-mark::before,
.video-title-mark::after{
  content:"";
  position:absolute;
  top:11px;
  height:2px;
  width:64px;
  background:#e52b18;
  border-radius:999px;
}
.video-title-mark::before{left:0}
.video-title-mark::after{right:0}
.video-title-mark i{
  position:absolute;
  left:50%;
  top:3px;
  width:18px;
  height:18px;
  transform:translateX(-50%);
  border-radius:50%;
  background:linear-gradient(145deg,#ff4b39,#df1f13);
  box-shadow:0 8px 16px rgba(230,39,24,.25);
}
.video-title-mark i::after{
  content:"";
  position:absolute;
  left:7px;
  top:5px;
  width:0;
  height:0;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  border-left:6px solid #fff;
}
.video-hero-boy,
.video-hero-girl,
.video-hero-screen,
.video-hero-youtube{
  position:absolute;
  z-index:3;
  height:auto;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
}
.video-hero-boy{
  left:36px;
  bottom:2px;
  width:276px;
  max-width:26vw;
}
.video-hero-girl{
  right:44px;
  bottom:2px;
  width:194px;
  max-width:18vw;
}
.video-hero-screen{
  right:214px;
  top:136px;
  width:136px;
  max-width:14vw;
  filter:drop-shadow(0 14px 18px rgba(27,48,76,.12));
}
.video-hero-youtube{
  left:6px;
  top:136px;
  width:94px;
  transform:rotate(-5deg);
  filter:drop-shadow(0 14px 18px rgba(222,43,30,.16));
}
.video-blob{
  position:absolute;
  z-index:1;
  width:280px;
  height:155px;
  border-radius:56% 44% 48% 52% / 58% 52% 48% 42%;
  background:#edf6f0;
}
.video-blob-left{
  left:40px;
  bottom:20px;
  transform:rotate(-7deg);
}
.video-blob-right{
  right:40px;
  bottom:20px;
  width:326px;
  height:170px;
  transform:rotate(6deg);
}
.video-dots{
  position:absolute;
  z-index:1;
  width:112px;
  height:74px;
  opacity:.42;
  background-image:radial-gradient(circle,#84bad0 2px,transparent 2px);
  background-size:22px 22px;
}
.video-dots-left{
  left:252px;
  top:126px;
}
.video-dots-right{
  right:28px;
  top:166px;
}
.video-star{
  position:absolute;
  z-index:2;
  width:18px;
  height:18px;
  transform:rotate(45deg);
  border-radius:5px;
  background:#f7c451;
  box-shadow:0 1px 0 rgba(201,136,11,.16);
}
.video-star::before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:4px;
  background:#fff6cf;
}
.video-star-one{
  left:114px;
  top:210px;
  transform:rotate(35deg) scale(.68);
}
.video-star-two{
  right:92px;
  top:220px;
  transform:rotate(35deg) scale(.72);
}

/* ============ CARDS ============ */
.video-catalog{
  position:relative;
  z-index:5;
  padding:0 24px 58px;
}
.video-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.video-card{
  --accent:#2e9e58;
  position:relative;
  scroll-margin-top:104px;
  min-height:158px;
  display:grid;
  grid-template-columns:104px minmax(0,1fr) 52px;
  align-items:center;
  gap:14px;
  overflow:hidden;
  padding:20px 24px 20px 20px;
  border:1px solid #ebefed;
  border-radius:18px;
  background:#fff;
  color:#071331;
  box-shadow:0 17px 36px rgba(22,38,31,.08);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.video-card:focus{
  outline:3px solid rgba(46,158,88,.28);
  outline:3px solid color-mix(in srgb,var(--accent) 42%,#fff);
  outline-offset:4px;
}
.video-card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--accent) 26%,#e8efeb);
  box-shadow:0 24px 52px rgba(22,38,31,.12);
}
.video-card::after{
  content:"";
  position:absolute;
  left:24px;
  bottom:0;
  width:86px;
  height:4px;
  border-radius:999px 999px 0 0;
  background:var(--accent);
}
.video-card-art{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}
.video-card-art img{
  width:108px;
  height:108px;
  object-fit:contain;
  filter:drop-shadow(0 14px 17px rgba(27,48,76,.10));
}
.video-card-copy{
  min-width:0;
}
.video-card-copy strong{
  display:block;
  color:var(--accent);
  font-size:clamp(20px,1.65vw,26px);
  font-weight:800;
  line-height:1.12;
  letter-spacing:0;
}
.video-card-copy small{
  display:block;
  max-width:230px;
  margin-top:10px;
  color:#101b32;
  font-size:14px;
  font-weight:500;
  line-height:1.45;
}
.video-play{
  position:relative;
  width:48px;
  height:48px;
  justify-self:end;
  border-radius:50%;
  background:linear-gradient(145deg,#ff4f3f 0%,#ed251a 52%,#d41712 100%);
  box-shadow:0 13px 21px rgba(230,42,28,.27);
}
.video-play::after{
  content:"";
  position:absolute;
  left:19px;
  top:16px;
  width:0;
  height:0;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-left:12px solid #fff;
  filter:drop-shadow(0 1px 1px rgba(126,26,18,.16));
}
.video-purple{--accent:#7e49cc}
.video-green{--accent:#2f9455}
.video-orange{--accent:#f47b22}
.video-blue{--accent:#377fd7}
.video-pink{--accent:#ee3d77}
.video-teal{--accent:#1f9f99}
.video-deep-orange{--accent:#ef6a14}

/* ============ CTA ============ */
.video-cta{
  position:relative;
  grid-column:span 2;
  min-height:158px;
  display:grid;
  grid-template-columns:136px minmax(0,1fr) 244px;
  align-items:center;
  gap:22px;
  overflow:hidden;
  padding:24px 36px 24px 30px;
  border:1px solid #dcebe4;
  border-radius:22px;
  background:linear-gradient(135deg,#edf7f1 0%,#e9f5ee 56%,#dceee6 100%);
  box-shadow:0 17px 36px rgba(22,38,31,.07);
}
.video-cta::before{
  content:"";
  position:absolute;
  right:232px;
  top:66px;
  width:86px;
  height:40px;
  border-top:2px solid #2c9d5b;
  border-radius:60% 0 0 0;
  transform:rotate(-20deg);
  opacity:.85;
}
.video-cta::after{
  content:"";
  position:absolute;
  right:210px;
  top:58px;
  width:12px;
  height:12px;
  border-top:2px solid #2c9d5b;
  border-right:2px solid #2c9d5b;
  transform:rotate(48deg);
}
.video-cta img{
  position:relative;
  z-index:2;
  width:124px;
  height:92px;
  object-fit:contain;
  filter:drop-shadow(0 16px 18px rgba(34,62,89,.12));
}
.video-cta div{
  position:relative;
  z-index:2;
  min-width:0;
}
.video-cta h2{
  color:#071331;
  font-size:24px;
  font-weight:800;
  line-height:1.16;
}
.video-cta p{
  max-width:560px;
  margin:12px 0 0;
  color:#1f2d47;
  font-size:14.5px;
  font-weight:500;
  line-height:1.55;
}
.video-cta strong{
  position:relative;
  z-index:2;
  justify-self:center;
  display:block;
  color:#138b54;
  font-size:18px;
  font-weight:800;
  line-height:1.2;
  text-align:center;
  transform:rotate(-3deg);
}
.video-cta strong span{
  display:block;
  color:#f22e1e;
  font-size:22px;
}

@media(max-width:1180px){
  .video-wrap{max-width:1040px}
  .video-hero-boy{left:38px;width:254px;max-width:28vw}
  .video-hero-youtube{left:10px}
  .video-hero-girl{right:52px;width:176px;max-width:20vw}
  .video-hero-screen{right:210px}
  .video-card{
    grid-template-columns:96px minmax(0,1fr) 50px;
    padding:20px;
  }
  .video-card-art img{width:100px;height:100px}
  .video-card-copy small{font-size:13.5px}
}
@media(max-width:980px){
  .video-hero{
    min-height:390px;
    padding-top:20px;
  }
  .video-hero-inner{min-height:370px}
  .video-hero-copy{
    padding-top:48px;
    max-width:620px;
  }
  .video-hero-boy{
    left:6vw;
    width:244px;
    max-width:34vw;
  }
  .video-hero-girl{
    right:7vw;
    width:188px;
    max-width:28vw;
  }
  .video-hero-screen{
    right:25vw;
    top:208px;
    width:122px;
  }
  .video-hero-youtube{
    left:8vw;
    top:202px;
    width:86px;
  }
  .video-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .video-cta{
    grid-column:1 / -1;
  }
  .video-dots-right{display:none}
}
@media(max-width:760px){
  .video-wrap{
    padding:0 18px;
  }
  .video-hero{
    min-height:352px;
  }
  .video-hero-inner{
    min-height:336px;
  }
  .video-hero-copy{
    padding-top:28px;
  }
  .video-hero-copy h1{
    font-size:38px;
  }
  .video-hero-copy p{
    max-width:310px;
    margin-left:auto;
    margin-right:auto;
    font-size:14.5px;
  }
  .video-hero-boy{
    left:6px;
    width:176px;
    max-width:48vw;
    bottom:0;
  }
  .video-hero-girl{
    right:8px;
    width:138px;
    max-width:39vw;
  }
  .video-hero-screen{
    right:33vw;
    top:207px;
    width:96px;
  }
  .video-hero-youtube{
    left:8px;
    top:160px;
    width:58px;
  }
  .video-blob-left{
    left:-64px;
    bottom:18px;
  }
  .video-blob-right{
    right:-90px;
    bottom:20px;
  }
  .video-dots-left{
    display:none;
  }
  .video-grid{
    grid-template-columns:1fr;
  }
  .video-catalog{
    padding:0 18px 58px;
  }
  .video-card{
    min-height:148px;
    grid-template-columns:94px minmax(0,1fr) 46px;
    gap:14px;
    padding:18px 18px 20px;
    border-radius:16px;
  }
  .video-card-art img{
    width:92px;
    height:92px;
  }
  .video-card-copy strong{
    font-size:21px;
  }
  .video-card-copy small{
    max-width:none;
    margin-top:8px;
    font-size:13.5px;
    line-height:1.45;
  }
  .video-play{
    width:46px;
    height:46px;
  }
  .video-play::after{
    left:19px;
    top:16px;
  }
  .video-cta{
    min-height:0;
    grid-template-columns:106px minmax(0,1fr);
    gap:14px;
    padding:22px 20px;
    border-radius:18px;
  }
  .video-cta::before,
  .video-cta::after{
    display:none;
  }
  .video-cta img{
    width:106px;
    height:82px;
  }
  .video-cta h2{
    font-size:20px;
  }
  .video-cta p{
    margin-top:7px;
    font-size:13.5px;
  }
  .video-cta strong{
    grid-column:1 / -1;
    justify-self:end;
    font-size:17px;
  }
  .video-cta strong span{
    display:inline;
    font-size:20px;
  }
}
@media(max-width:430px){
  .video-hero-copy h1{
    font-size:34px;
  }
  .video-title-mark{
    width:126px;
  }
  .video-title-mark::before,
  .video-title-mark::after{
    width:52px;
  }
  .video-card{
    grid-template-columns:88px minmax(0,1fr) 42px;
    gap:10px;
    padding:16px 14px 19px;
  }
  .video-card-art img{
    width:88px;
    height:88px;
  }
  .video-card-copy strong{
    font-size:20px;
  }
  .video-card-copy small{
    font-size:13px;
  }
  .video-play{
    width:42px;
    height:42px;
  }
  .video-play::after{
    left:17px;
    top:14px;
    border-top-width:7px;
    border-bottom-width:7px;
    border-left-width:11px;
  }
}